CSSintroevergreen

CSS custom properties

Variables that live in the cascade.

Custom properties aren't preprocessor variables — they're real values in the DOM that inherit, cascade, and update live. Define once with --name, read with var().

Define on :root, use everywhere

HTML+CSS+JSintro
Press Run to execute

The card's panel background, ink text, amber border, title colour, and CTA all resolve from the four tokens declared once on :root. Because custom properties inherit, every descendant reads the same var() values without any of them being redeclared.