CSS Without Tears

You just finished html-from-zero and you have a plain "About Me" page: black text, blue links, default font, top to bottom, no personality. That page is correct HTML and it looks like it's from 1998. CSS is what turns it into something you'd actually want someone to see.

The reason CSS feels chaotic at first is that it looks like a flat list of rules with no logic connecting them - until you learn the small set of ideas everything else builds on. Which selector wins when two rules disagree. What "the box model" means for every single element on the page. Why rem behaves differently from px. What position actually repositions relative to. Once those four ideas click, the rest of CSS is vocabulary you can look up as needed.

This guide styles that one "About Me" page from nothing to a finished layout, one phase at a time.

How to read this

• Want it to finally make sense? Read in order - each phase styles more of the same page and depends on the last.
• Already comfortable with basics, need positioning? Jump straight to Phase 4: Positioning.

The phases

1. Selectors and the Cascade - how CSS picks which rule wins, what inherits from parent to child, and when !important is a legitimate escape hatch.
2. The Box Model - what padding, border, and margin actually do to an element's size, and why box-sizing: border-box is in almost every real stylesheet.
3. Colors, Units, and Typography - hex vs. rgb vs. hsl, why rem beats px for font sizes, and the line-height mistake almost everyone makes.
4. Positioning - static, relative, absolute, fixed, and sticky, worked through a sticky header and a centered modal.

Real layout systems - lining elements up in rows, columns, and grids - are their own guide: Flexbox and Grid. This guide is what you need before that one makes sense.