CSS Custom Properties
CSS variables store reusable values. They are defined with a -- prefix and read with var(--name).
Define them in :root for global access, or in a selector for local scope.
HTML
Intermediate
5 min read
CSS Custom Properties (Variables)
Example
:root {
--primary: #007bff;
--radius: 4px;
--spacing: 1rem;
}
.btn {
background: var(--primary);
border-radius: var(--radius);
padding: var(--spacing);
} Pro Tip
Use CSS variables for design tokens (colors, spacing, radii) to enable easy theme changes.