Learn CSS
Modern CSS learning path: from basics → layout → animation → architecture.
Basics
- Selectors & specificity, cascade, inheritance.
- Box model: content, padding, border, margin.
box-sizing: border-box. - Display: block / inline / inline-block / flex / grid / contents.
- Position: static / relative / absolute / fixed / sticky.
- Units: px, %, em, rem, vh, vw, ch, fr, clamp().
Layout
- Flexbox — 1D layout.
- Grid — 2D layout, with template areas.
- Container queries — responsive based on the container, not the viewport.
- Subgrid — nested grids aligned with the parent.
Modern features
- CSS variables (custom properties).
:has()selector — parent selector!- Nesting — write SCSS-style in plain CSS.
- View transitions API.
color-mix(),@layer,@scope.