The CSS Roadmap

What CSS is, how the browser turns rules into pixels, the three ways to add styles, how to read CSS syntax, and how to inspect it in DevTools.

How CSS points at elements: type, class and ID selectors, combinators, attributes, pseudo-classes, :is/:where/:has and pseudo-elements.

Why one CSS rule beats another: origins, !important, cascade layers, specificity scores, source order and inheritance, step by step.

Pixels, em, rem, %, ch, viewport units, every colour format from hex to oklch, CSS variables and calc/min/max/clamp, explained from zero.

Fonts, font stacks, web fonts, size, weight, line height, alignment, decoration, long text, lists and links: make text readable and beautiful.

Every element is a box: content, padding, border and margin. Learn box-sizing, margin collapsing, display, sizing, overflow, borders, shadows and backgrounds.

How boxes lay out by default, writing modes, the five position values, z-index and stacking contexts, floats, and every way to center something.

Lay out boxes in a row or a column with Flexbox: axes, alignment, how flex-grow, flex-shrink and flex-basis share space, wrapping, gaps and real patterns.

Two-dimensional layout with CSS Grid: tracks and fr, repeat and minmax, auto-fit galleries, line placement, named areas, alignment, subgrid, and when to pick Flexbox.

Build pages that work on every screen: mobile first, the viewport meta, media queries, user preferences, fluid type, responsive media, container queries and logical properties.

Transitions, 2D and 3D transforms, keyframe animations, filters, blend modes and masks, smooth and accessible motion, and scroll effects.

Write CSS like a senior: native nesting, :has(), theming and dark mode, naming and layers, tooling, debugging, accessible CSS and model interview answers.