🌱BeginnerCSS Units and Variables
CSS Custom Properties (Variables)
Create reusable values with CSS custom properties (variables) and use them to build consistent design systems.
Overview
CSS Custom Properties (also called CSS variables) let you store values in named variables and reuse them throughout your stylesheet. This avoids repetition and makes global changes easy change a value in one place, and it updates everywhere it is used.
Syntax:
- **Declare:** `--variable-name: value;` (double dash prefix)
- **Use:** `var(--variable-name)` or `var(--variable-name, fallback)`
Variables are typically declared on `:root` (which targets the `<html>` element) to make them globally available. But you can also scope them to specific elements useful for component-level theming.
CSS variables are live: if you update a variable with JavaScript, all elements using it update instantly. This is the foundation of CSS-based dark mode and theming.
Key Points
- •Declare: --color-primary: #2563eb; on :root (or any element)
- •Use: color: var(--color-primary);
- •Fallback: var(--color-accent, orange) uses "orange" if the variable is undefined
- •Variables cascade and inherit like normal CSS properties
- •Scope variables to a component by declaring them on the component's root element
- •JavaScript can read/write CSS variables via element.style.setProperty()
Examples
Design token system with custom properties
/* Define tokens on :root */
:root {
/* Colors */
--color-primary: #2563eb;
--color-secondary: #7c3aed;
--color-text: #1e293b;
--color-surface: #f8fafc;
--color-border: #e2e8f0;
/* Spacing scale */
--space-1: 4px;
--space-2: 8px;
--space-4: 16px;
--space-8: 32px;
/* Typography */
--font-base: 1rem;
--font-lg: 1.25rem;
--radius-md: 8px;
}
/* Use them */
.button {
background: var(--color-primary);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-md);
color: white;
}Fallback values
.element {
color: var(--accent-color, tomato);
/* Uses tomato if --accent-color is not defined */
}
/* Chaining variables */
.heading {
font-size: var(--font-heading, var(--font-lg, 1.25rem));
}Dark mode with CSS variables
:root {
--bg: #ffffff;
--text: #1a1a1a;
}
[data-theme="dark"] {
--bg: #1a1a1a;
--text: #ffffff;
}
body {
background-color: var(--bg);
color: var(--text);
}
/* Toggle dark mode by adding data-theme="dark" to <html> */Changing the theme only requires swapping the variable values no duplicate CSS needed.
Common Mistakes
- Forgetting the double dash: --my-var, not -my-var or $my-var
- Defining variables locally on a child element and trying to use them in a parent
- Misspelling the variable name CSS silently falls back to the initial value
Note
Start every project with a :root block defining colors, spacing, font sizes, and border-radius as CSS variables. This instantly gives you a design system and makes global changes trivial.
Exercises
Write CSS to style the HTML scaffold. The preview updates live — when it looks right, mark as done.
Loading editor…
Completed: 0 / 5 exercises
Knowledge Check
Question 1 of 4