Change a colour once, and it updates everywhere.
Direct answer
CSS variables, officially custom properties, are defined with --name: value and used with var(--name). Define them on :root for global use. They can be overridden in any element and are ideal for colours, spacing and themes.
Example
:root {
--brand: #3d5afe;
--space: 16px;
}
.button {
background: var(--brand);
padding: var(--space);
}
.card {
--space: 24px; /* overrides inside .card */
padding: var(--space);
}
Fallbacks
color: var(--text-color, #222);
Themes
:root { --bg: #fff; --text: #111; }
[data-theme="dark"] { --bg: #111; --text: #eee; }
body { background: var(--bg); color: var(--text); }
Change with JavaScript
document.documentElement.style.setProperty("--brand", "#e91e63");
Where Teyro fits
Teyro's HTML & CSS for Beginners course turns this into short lessons you can play in a few minutes a day. It has 100 lessons, and you can start free.
The bottom line
Variables make styles consistent and themes easy.
