Reuse styles with CSS variables
Create design tokens with custom properties and apply a consistent theme.
- Define reusable custom properties
- Use var() with fallback values
- Apply a shared color theme
CSS custom properties (often called CSS variables) store reusable values such as colors, spacing and radius. Defining them in :root makes them available across the page and helps keep a design system consistent.
1:root {
2 --brand: #165b33;
3 --surface: #f4f8f5;
4}
5
6.card {
7 color: var(--brand);
8 background: var(--surface);
9}Shared theme values applied to every card
Use var(--token, fallback) when a property should have a safe fallback. Custom properties make updates faster because one change can affect many selectors.
Key takeaways
Custom properties help reuse style values.
Define shared tokens near the top of the stylesheet.
Use var() to read tokens in component rules.
Lesson quiz
5 questions · pass with 4 correct · up to 50 XP
Passing this quiz completes the lesson and keeps your streak going. Questions you miss come back in review sessions later.
Practice: write CSS
Style the sample page, see your changes in the sandboxed preview, and run checks against the computed styles.
Theme a card with tokens
In :root, define --brand as #165b33 and --surface as #f4f8f5. Then style .card with text color var(--brand) and background color var(--surface).
- Tokenized colors
Your CSS is applied to a sample page in a sandboxed preview. Tests check computed styles.
Questions about this lesson
Stuck? Ask. Figured something out? Share it. Explaining is one of the best ways to learn.
Loading posts…