LESSON 27

CSS Variables

Learning objective: Reuse values with custom properties.

Understand

CSS variables store values you reuse across your styles.

Define a custom property on :root like --accent: #6c63ff; and use it with var(--accent). Change one value and it updates everywhere — perfect for theming and consistency.

Analogy: A CSS variable is like a labelled paint can: refill it once and every wall using it updates.

See It in Action

Defining and using a variable:

:root { --accent: #6c63ff; }
.btn { background: var(--accent); }
a    { color: var(--accent); }
How it works: Both the button and the link read the same --accent value, so changing it in one place restyles both.

Try It Yourself

  1. Define an --accent variable on :root.
  2. Use var(--accent) in two rules.
  3. Change the variable and see both update.

Quick Quiz

How do you read a CSS variable's value?

Challenge

Refactor a page to use variables for its main colors.

Success condition: Changing one variable updates the color across your page.