Body text styles

The default Bear Blog theme keeps body text plain, paragraphs and lists with nothing fancy. That leaves a lot of room to add some character to the words themselves.

This page collects small CSS tweaks and variations for paragraphs, lists, and other body text elements. Each one works out of the box, but they're just as much meant as a starting point. Mix and match, tweak the values, or use them to learn more about theme styling.

Last updated 10 minutes ago.

Paragraph spacing

Wider spacing between paragraphs

/* Body text: paragraph spacing | robertbirming.com */
main p {
  margin-block: 1.2em;
}

Lists

Simple bullet spacing for lists

/* Body text: lists | robertbirming.com */
ul, ol {
  padding-inline-start: 2em;
}

li {
  margin-block: 0.15em;
}

Cite

Styled citation text with a dash prefix

/* Body text: cite | robertbirming.com */
cite {
  display: block;
  margin-block-start: 0.5em;
  font-size: calc(var(--font-scale) * 0.85);
  font-style: normal;
  color: color-mix(in srgb, var(--text-color), transparent 30%);
}

cite::before {
  content: "— ";
}

Text selection

Custom highlight color when selecting text

/* Body text: text selection | robertbirming.com */
::selection {
  color: var(--background-color);
  background-color: color-mix(in srgb, var(--link-color), transparent 20%);
}

Mark and highlight

Custom highlight color for the mark tag

/* Body text: mark | robertbirming.com */
mark {
  padding-inline: 0.15em;
  color: var(--background-color);
  background-color: color-mix(in srgb, var(--link-color), var(--text-color) 40%);
}

Aside

Boxed aside element with a label

/* Body text: aside | robertbirming.com */
aside {
  margin-block: 1.5rem;
  padding: 1.1em 1em 0.1em;
  background-color: color-mix(in srgb, var(--link-color), var(--background-color) 85%);
  border: 1px solid color-mix(in srgb, var(--text-color), transparent 85%);
  border-radius: 6px;
}

aside::before {
  content: "Note";
  display: block;
  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text-color), transparent 25%);
}

aside p:first-of-type {
  margin-block-start: 0.7em;
}

Footnotes

Footnotes section with a dashed top border

/* Body text: footnotes | robertbirming.com */
.footnotes {
  margin-block-start: 2rem;
  padding-block-start: 1rem;
  font-size: calc(var(--font-scale) * 0.9);
  border-block-start: 1px dashed color-mix(in srgb, var(--text-color), transparent 50%);
}

.footnotes ol {
  padding-inline-start: 1.2em;
}

.footnote {
  margin-inline-start: 0.3em;
  text-decoration: none !important;
}

Kbd

Boxed keyboard key styling

/* Body text: kbd | robertbirming.com */
kbd {
  padding: 0.1em 0.5em;
  font-family: monospace;
  font-size: 0.85em;
  background-color: var(--code-background-color);
  border: 1px solid var(--code-color);
  border-radius: 3px;
}

Small text

Smaller fine print text

/* Body text: small text | robertbirming.com */
small {
  font-size: 0.8em;
  color: color-mix(in srgb, var(--text-color), transparent 20%);
}

Abbreviation

Dotted underline for abbreviations

/* Body text: abbreviation | robertbirming.com */
abbr {
  text-decoration: underline dotted;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  cursor: help;
}

Details and summary

Collapsible details and summary element

<details>
<summary>Click to expand</summary>
Your content here.
</details>

/* Body text: details and summary | robertbirming.com */
details {
  margin-block: 1.5rem;
  padding: 0.8em 1em;
  border: 1px solid color-mix(in srgb, var(--text-color), transparent 85%);
  border-radius: 4px;
}

summary {
  font-weight: 700;
  cursor: pointer;
}

details[open] summary {
  margin-block-end: 0.5em;
}

Have fun adding some character to your words.

Want more? Check out the full Bear Blog library.