Chapter 16 — CSS Variables

Name reusable colour roles, build palettes, and create scoped themes with CSS custom properties.

New concepts

Custom property declarations, document-wide values in :root, the var() function, inherited scoped overrides, fallback values, an HTML→CSS data channel via inline custom properties, and prefers-color-scheme token overrides.

Read the CSS Variables gauge

What changes after Combined Practical Projects?

Earlier chapters reuse declarations through selectors and inheritance. This chapter gives repeated colour values meaningful names, allowing a component or page palette to change without rewriting every declaration that uses it.

Lessons

  1. 1. Define and use a root colour palette
  2. 2. Scope and override inherited variables
  3. 3. Add fallbacks to a reusable theme
  4. 4. Pass data from HTML into CSS with custom properties
  5. 5. Follow system light/dark with token overrides

Checkpoint

Create a root palette with semantic names for page, surface, text, brand, border, and focus colours. Use it in one reusable card, override the complete palette on a container, provide a fallback for one optional value, and verify readable contrast in both versions.