Everything you need to know about CSS
CSS (Cascading Style Sheets, .css) is the styling language of the web. From its 1996 origins as a way to add fonts and colors, CSS has evolved into a powerful layout system (Flexbox, Grid), animation framework, and design tokens platform. Modern CSS handles things that required JavaScript even five years ago.
How it works under the hood
- The Cascade. When multiple rules target the same element, specificity (inline > id > class > element) determines which wins. `!important` is the nuclear option - usually a sign of a deeper problem.
- Box model. Every element is a rectangle: content + padding + border + margin. Set `box-sizing: border-box` and life gets easier.
- Flexbox and Grid. The two modern layout systems. Flexbox for one-dimensional layouts (row OR column), Grid for two-dimensional (rows AND columns).
- Custom properties. `--my-color: red; color: var(--my-color)` - real CSS variables, dynamically updatable with JavaScript.
Where you'll actually use it
- Web page styling (universal)
- Email styles (limited subset, inline only for max compatibility)
- Print stylesheets (`@media print` for paper-friendly output)
- PDF generation (Paged.js, weasyprint use CSS for print)
How it compares to alternatives
CSS vs Sass/Less: Sass adds variables, mixins, nesting - but modern CSS now has many of these natively. CSS vs Tailwind: Tailwind is utility-first; CSS is property-first. CSS vs CSS-in-JS: CSS-in-JS scopes styles to components - good for big React apps, overkill for static sites.
Things that will trip you up
- Margin collapse: top and bottom margins of adjacent block elements merge into the larger of the two - causes layout surprises
- Specificity wars: stacking IDs and classes to override styles is a code smell - refactor instead
- z-index needs `position: relative/absolute/fixed` to take effect - forgetting this is a 30-minute debugging session
Test it yourself: Chrome DevTools (best in class), CSS Validator at jigsaw.w3.org, stylelint for linting in CI.