CSS Custom Properties

1. Define, use, fallback

:root {
  --brand: #5A8AB9;
  --radius: 14px;
  --space: 1rem;
}
.card {
  background: var(--surface, #fff);   /* fallback if unset */
  border-radius: var(--radius);
  padding: calc(var(--space) * 1.5);  /* math with variables */
}

Declared on :root they're global; declared anywhere else they scope to that subtree. Unlike preprocessor variables they live at runtime — JavaScript can read and write them, and calc() composes them freely.

2. Theming: the killer app

:root {
  --paper: #F5F7F8;
  --ink:   #20242A;
}
[data-theme="dark"] {
  --paper: #141A21;
  --ink:   #E8EDF2;
}
body { background: var(--paper); color: var(--ink); }

Flip one attribute and every var() consumer updates — no duplicate stylesheets. Press the moon icon in this site's header: you're watching exactly this technique. The same scoping powers component variants: set --accent differently per card class and shared rules render differently.

3. Try it yourself

Extract the repeated blue into --brand on :root and use var(--brand) in both rules — then change the variable once to #E0594A and watch both update.

4. Quiz — check your understanding