CSS Variables (custom properties) — :root
Define colors/sizes once in :root, use var(--name) everywhere. Change once, updates everywhere.
style.css
v3.1
style.css — the CSS rules
index.html — the HTML structure (what the CSS targets)
Live preview
updates as you type
🧠 How it works
:root is the highest-level selector — it targets <html>. Variables defined here are available everywhere. Define variables with --name: value; Use them with var(--name). Benefits: (1) change a color in ONE place, it updates across the whole site. (2) Consistent spacing — every padding/margin uses --space-sm/md/lg. (3) Easy theming — override variables in a @media query or a .dark-mode class to switch the whole palette. Variables can reference other variables: --color-primary-light: color-mix(in srgb, var(--color-primary) 30%, white). Fallback values: var(--color-primary, #ccc) — uses #ccc if --color-primary isn't defined.
✏️ Try these changes
-
Change --color-primary from #a0c000 to #58a6ff→ button + any var(--color-primary) element changes to blue -
Change --space-lg from 2rem to 4rem→ all large spacing doubles — card padding grows -
Change --radius from 8px to 20px→ all rounded corners become more rounded -
Add --color-primary: #f85149 inside a .card { } rule→ only .card gets the overridden color (scoped variable)