Learn CSS — web.dev

Written by members of the Chrome team and outside experts, Learn CSS is the closest thing the language has to a proper textbook that stays current. It runs to around thirty-nine modules, and the ordering is unusually thoughtful: box model first, then selectors, then the cascade, specificity and inheritance — the four things that explain why your CSS isn't doing what you told it to.

What separates it from a reference is that each module explains the mental model before the syntax. The specificity module in particular is worth reading even if you've written CSS for a decade, because most of us carry a slightly wrong version of it around.

What it covers

• Fundamentals — box model, selectors, nesting, the cascade, specificity, inheritance
• Layout — sizing units, layout, Flexbox, Grid, logical properties, spacing, overflow
• Styling — colour, borders, shadows, gradients, backgrounds, filters, blend modes, text and typography
• Selectors and state — pseudo-elements, pseudo-classes, focus, cursors, z-index and stacking contexts
• Modern additions — custom properties, container queries, anchor positioning, popover and dialog, view transitions for SPAs
• Motion — transitions, animations, clipping and masking, paths and shapes

Why the ordering is the feature

Most CSS teaching starts with what things look like and gets to the cascade eventually, if at all. Doing it the other way round means that when you hit Grid in module twelve you already understand why a rule you wrote earlier is being overridden. There's a quiz at the end that earns you a badge, which is pleasant and not worth much.

Where it struggles

It's long, and the modules vary in depth — some are thorough essays, others read closer to a well-written reference page, and the newer additions on anchor positioning and view transitions cover features whose browser support is still uneven. The site doesn't consistently flag that. You can read a module, get excited, and then find the property doesn't work in the browser your users have. Check support yourself before shipping anything from the last third.

Who it's for

Developers who write CSS every day and know they're guessing about half of it. Also good for anyone coming from a utility framework who has never had to reason about specificity. Skip it as a first CSS resource — there's no project, no editor, no feedback, and a beginner needs to build something. freeCodeCamp's Responsive Web Design gives you that; come here afterwards to understand what you were doing.

Our take

The best free CSS explanation available, and reading-only. The absence of exercises is the real gap: a single badge quiz at the end is not practice, and CSS is a skill you acquire by breaking layouts, not by reading about them. Read it alongside a project you're actually building, one module at a time, or it won't stick.