CSS Variables

Last reviewed May 28, 2026 Content v20260528

This lesson

This lesson teaches CSS Variables—the ideas, syntax, and habits you need before moving on in CSS.

Reusable tokens and variables keep large stylebases consistent and cheaper to retheme.

You will apply CSS Variables in contexts like: All browser UIs, component libraries, marketing sites, and many native apps that reuse web views.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs.

When intermediate lessons feel comfortable and you are ready for production-style trade-offs.

CSS custom properties (variables) enable reusable design tokens and dynamic theming.

:root { --brand-600: #4f46e5; }\n.button { background: var(--brand-600); }

Q: Why CSS vars over preprocessor vars?
A: CSS vars are runtime-aware and can change per element/context.
Q: Can variables be animated?
A: Some can, especially with typed registration via @property.
Q: Best use case?
A: Theming and consistent spacing/typography/color systems.

Practice: Change one property in the playground and observe cascade + layout in DevTools.

Can you explain this lesson in 30 seconds without reading notes?

Self-reflection (saved on this device)

Not saved yet.

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Multiple choice — immediate feedback.

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

No discussion yet. Be the first to ask a question.

Jump