Learn CSS
A free, evergreen CSS course and reference on web.dev, from the box model and the cascade to flexbox, grid, custom properties, focus, container queries and view transitions. The best free way to learn the CSS needed to turn designs into code.
Course
Web Development
web.dev (Google)
Beginner
Free
What it is
Learn CSS is a free course on web.dev, Google's site for web developers, described as an evergreen CSS course and reference. It is organised as short modules you can read in order or dip into when you need one topic.
What it covers
As of 2026-09 the modules include the box model, selectors, nesting, the cascade, specificity and inheritance; colour and sizing units; layout, flexbox and grid; logical properties; custom properties; spacing; pseudo-elements and pseudo-classes; borders and shadows; focus; z-index and stacking contexts; anchor positioning; popover and dialog; functions; gradients, animations, filters and blend modes; transitions and view transitions; overflow, backgrounds, text and typography; and container queries.
Why it matters for designers and developers
Most visual design decisions end up as CSS: spacing becomes gap and padding, a type scale becomes font sizes, tokens become custom properties, auto layout becomes flexbox. Understanding CSS well lets developers match a design precisely and lets designers design things that are straightforward to build.
Time needed
About 30 to 40 hours if you read every module and try the examples. You can learn the layout and custom property modules in a weekend.
Prerequisites
Basic HTML. No prior CSS needed.
Is it worth it?
Yes. It is free, current, and it teaches modern CSS such as container queries, nesting and anchor positioning, which many older tutorials miss. For a deeper, paid explanation of how layout algorithms work, CSS for JavaScript Developers is an option, but this course covers what most people need.
How to use it
Do not just read. After each module, rebuild a small part of a real design: a card with flexbox, a page grid, a token file with custom properties, a visible focus style. The Focus module is especially important for accessibility.
What you can do after
Build layouts with flexbox and grid, manage the cascade and specificity, use custom properties as design tokens, write accessible focus styles and make components respond to their container.
Common questions
Should I learn Tailwind instead? Learn CSS first. Tailwind is a way of writing CSS, and you debug it with CSS knowledge.
Is it up to date? It is maintained on web.dev and covers recent CSS features; browser support for the newest ones is noted in the modules.
Ready to start?
Opens on web.dev (Google) in a new tab.
Stuck on something specific?
Writing only gets you so far. If you want an answer to your situation rather than the general case, book a session and we will work through it together. Sessions are free for approved Sefism members, and a few slots open each week.
Follow along
New writing, resources and project ideas land here first.