Write CSS like a professional: tokens, cascade layers, `:has()`, modern layout, motion and accessible design systems.
- 28 lessons
- 7 units
- 5 h 24 m in all
- £0, for good
what’s inside.
For people who build things on their own and want code that others trust and can change.
CSS Level 3 is for people who finished Levels 1 and 2. In 28 lessons you master custom properties and themes, cascade layers, `:has()`, subgrid and container queries, transforms, animation and reduced motion, then build a small design system with accessible focus and contrast. It ends with a level check: a themeable component set you ship yourself.
every lesson goes the same way.
- meet it
- guess first
- your turn
- fix it
- nailed it
unit 1
Name your values
Store colours and sizes once, then reuse and swap them across a whole site.
- Custom properties10 minStore a colour once and use it all over the page.
- Tokens follow the family tree11 minRestyle a whole section by changing one token inside it.
- A plan B for every var()12 minKeep styles safe when a token is missing or holds the wrong thing.
- Themes12 minSwitch a whole page to dark mode by swapping a few tokens.
unit 2
Control the cascade
Decide which rule wins on purpose, instead of fighting specificity.
- Group with :is()11 minWrite one selector that matches many, and know what it weighs.
- Weightless with :where()11 minWrite defaults that any later rule can change without a fight.
- Cascade layers12 minGroup rules into layers so the right ones win, whatever their weight.
- Setting the layer order12 minFix the order of every layer in one line, and know what beats them all.
unit 3
Look inside
Style elements by what they contain and what state they are in, with no script.
- The :has() selector11 minStyle an element by what sits inside it.
- Combinators inside :has()12 minTest for direct children and next-door neighbours, and even count them.
- Style what is missing11 minPlan for messy data: style cards with no photo and profiles with no bio.
- Reacting to state12 minHighlight a choice and reveal parts of a form when a box is ticked.
unit 4
Modern layout
Shape and place components with the newest layout tools in every browser.
- Aspect ratio10 minKeep a box's shape at any width, without working out heights.
- Logical properties12 minWrite spacing that follows the text, so any language looks right.
- Subgrid13 minLine up titles, prices and buttons across a row of cards.
- Container queries13 minStyle a component by the space it is given, not the screen size.
unit 5
Move, turn and grow
Move, turn and resize boxes without disturbing the layout around them.
- Move it with translate10 minSlide a box into place without pushing anything else.
- Turn and resize10 minTilt stickers and grow cards without pushing their neighbours.
- The pivot point11 minSwing doors from their hinges and grow menus from their tops.
- Chaining transforms13 minCombine several moves in one property, and get the order right.
unit 6
Make it move
Animate the page with keyframes, and keep the motion kind to every visitor.
- Keyframes11 minDescribe an animation once, then play it on any element.
- Timing functions11 minChoose how an animation speeds up and slows down, or ticks in steps.
- The animation shorthand13 minWrite a whole animation in one line, and read anyone else's.
- Respect reduced motion12 minTurn big movement off for people whose devices ask for less.
unit 7
Design systems
Turn your styles into a system a whole team can build with, for every visitor.
- Design tokens and scales13 minSplit tokens into raw values and jobs, and build a spacing scale.
- Utility classes12 minAdd small one-job classes that always win, without heavier selectors.
- Focus you can see11 minGive keyboard users a clear, consistent focus ring from your tokens.
- Contrast you can trust12 minPick text and surface tokens that everyone can read, in every theme.