CSS Variables (Custom Properties)
CSS Variables (Custom Properties)
CSS custom properties let a design reuse values while keeping components easy to restyle.
What you’ll learn
- Define and use a CSS custom property.
- Override a token on a local component.
- Provide a valid var() fallback.
Understand the concept
Define a property using a name beginning with --, such as --accent: #2563eb. Read it with var(--accent). Custom properties generally inherit, so a descendant can reuse a theme token or override it for one card.
Use var(--accent, #2563eb) to provide a fallback when the variable is missing or invalid. A fallback is not a substitute for verifying that an entire CSS value is valid.
What the browser evaluates
The browser substitutes custom-property values into declarations at computed-value time; a local override can recolor a nested component.
Create a reusable accent
Use one variable in two declarations.
HTML
<article class="token-card"><strong>Plan overview</strong><a href="#tasks">View tasks</a></article>CSS
.token-card { --accent: #2563eb; padding: 16px; border-left: 5px solid var(--accent); background: #eff6ff; } .token-card a { display: block; color: var(--accent); margin-top: 8px; }Rendered output
Observe: One --accent declaration controls both the border and link color.
Override a token locally
Reuse the component style with a different accent.
HTML
<article class="token-card alternate"><strong>Plan overview</strong><a href="#tasks">View tasks</a></article>CSS
.token-card { --accent: #2563eb; padding: 16px; border-left: 5px solid var(--accent); background: #ecfdf5; } .token-card.alternate { --accent: #0f766e; } .token-card a { display: block; color: var(--accent, #2563eb); margin-top: 8px; }Rendered output
Observe: The alternate card uses teal without rewriting each child style.
Explain the result
The browser substitutes custom-property values into declarations at computed-value time; a local override can recolor a nested component.
Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.
Common mistakes to avoid
Custom-property names are case-sensitive: --Accent and --accent differ.
A variable cannot repair invalid syntax outside of its substituted value.
Try it yourself
Declare --space:16px and reuse it for the card padding and link margin.
Before changing the code, predict what will change. Then verify by checking the rendered result.
Check your understanding
What you should remember
Use custom properties for meaningful reusable design tokens, not every individual number.
Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.
Reaching the recap and completing the quizzes are separate milestones.