CSS Without Tears

CSS looks like a pile of unrelated rules until you learn the handful of ideas underneath it - selectors, the box model, units, and positioning. This guide builds all four on one running example.

1. Selectors and the Cascade How CSS decides which rule wins when two rules target the same element, what properties inherit from parent to child, and when !important is legitimate versus a code smell.
2. The Box Model Every HTML element is a box made of content, padding, border, and margin - and why almost every real stylesheet sets box-sizing: border-box globally to stop that box from surprising you.
3. Colors, Units, and Typography Hex, rgb, and hsl color syntax, why rem is the right default unit for font sizes because it respects the user's browser settings, and the line-height mistake that makes text feel cramped.
4. Positioning What static, relative, absolute, fixed, and sticky actually reposition an element relative to, worked through a sticky header and a centered modal overlay.