Theme building guide

A look at how a Bear Blog theme actually gets built, one change at a time. Useful if you're new to CSS or want to see how the pieces fit together.

Newest changes go at the top, so you'll always see the most recent one first. Older ones stay further down if you want to catch up from the start.

Last updated 0 minutes ago.

Paragraph spacing

p {
  margin-block: 1.2rem;
}

A bit of space above and below each paragraph to give it some breathing room.

Box-sizing reset

Some housekeeping before the real styling starts.

/* Box-sizing reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

Imagine drawing a box that's 300px wide. Without this rule, adding a border e.g. makes the box sneakily grow bigger. With this rule, the box stays 300px, no matter what you add inside it.

One rule, less guessing. I usually place it before the body section.

Naming the theme, and a note on comments

First thing, let's start by naming the theme:

/*
* SepThemeBear 2026
* Version 0.0.1 | 2026-09-01
* Robert Birming | robertbirming.com
*/

Anything wrapped in /* */ is a comment. You can write notes to yourself and others, or use it to hide styles from the live look.

Want more? Check out the full Bear Blog library.