CSS TL;DR

2026 Aug 08
GitHub, Url↗
An interactive primer on the handful of ideas that explain most of CSS: the box model, positioning, flexbox, grid, the cascade, and responsive design.

---

Most of CSS comes down to a handful of ideas about boxes, space, and precedence. Once those click, most of the rest follows.

So I made an interactive primer that takes seven of them — how CSS thinks, the box model, positioning, flexbox, grid, the cascade, and responsive design — and gives each one the same treatment: a one line TL;DR worth remembering, a mental model, a live demo you can break, and the mistake that actually trips people up.

The demos aren't illustrations. The CSS panel under each one prints the exact declarations running on the element beside it.

See css-tldr for the full thing.