CSS in Depth

CSS is considered "simple" right up to the first collision: a style doesn't apply, a margin vanishes somewhere, sticky won't stick, z-index: 9999 doesn't help. None of these riddles are bugs — they're rules you don't know yet. This series is about the rules: ten articles on why CSS behaves the way it does.

Ten articles go in order — each builds on the previous ones:

1. CSS basics — rule syntax, attaching styles, classes, and DevTools.
2. Cascade, specificity and inheritance — how the browser picks a winner among conflicting rules.
3. Selectors — combinators, nth-child, ::before/::after and the modern :is/:where/:has.
4. The box model — box-sizing, margin collapsing, border-radius and box-shadow.
5. Document flow — block/inline, three ways to hide an element, and the float legacy.
6. Positioning — from the relative anchor to sticky and z-index stacking contexts.
7. Flexbox — axes, justify/align, the grow/shrink/basis trio and min-width: 0.
8. Grid — tracks and fr, auto grids without media queries, named areas.
9. Units and sizing — rem versus px, viewport units, clamp and media queries.
10. Visual effects — gradients, object-fit, filters, transforms and the animation skeleton.

Animation performance and organizing styles in a React project live in the neighboring section — Animations: CSS and optimizations and Styling a React application: this series gives them their foundation.

The series is part of the Frontend program as a phase before React: components and design systems stand on the cascade, the box model, and flexbox — without them any layout work remains guessing at magic properties.