CSS Variables & Custom Properties

Learn CSS custom properties — define, inherit, override, and dynamically update variables for theming.

Category: Web Development · v1.0.0

Step 1 of 6

Step 1: What are CSS Variables?

CSS Custom Properties (commonly called CSS variables) let you store values in one place and reuse them throughout your stylesheet. They make your CSS more maintainable, readable, and dynamic.

A custom property is declared with a double-hyphen prefix (--) and accessed with the var() function:

:root {
  --primary-color: #3b82f6;
  --font-size: 16px;
  --spacing: 1rem;
}

.button {
  background: var(--primary-color);
  font-size: var(--font-size);
  padding: var(--spacing);
}

You can also provide a fallback value in case the variable is not defined:

color: var(--accent-color, #e74c3c);

Key terms:

Custom property — a property name starting with --, e.g. --my-color
var() — the function used to retrieve a custom property's value
:root — the top-level selector (the <html> element), used for global variables
Fallback value — a default passed as the second argument to var()
Scope — variables are inherited by descendant elements and can be overridden at any level

Step 2: Declaring & Using

Adjust the controls below to change CSS variable values. The preview card updates live as you change each value.

--primary-color

#3b82f6

--font-size: 16px

--border-radius: 8px

--spacing: 16px

Preview Card

This card is styled entirely with CSS variables. Change the controls above to see it update.

Badge

.card {
  --primary-color: #3b82f6;
  --font-size: 16px;
  --border-radius: 8px;
  --spacing: 16px;

  padding: var(--spacing);
  border-radius: var(--border-radius);
  border: 2px solid var(--primary-color);
  font-size: var(--font-size);
}

Step 3: Scope & Inheritance

CSS variables inherit down the DOM tree. A variable set on a parent is available to all its descendants. You can override a variable on a child, and only that branch changes.

Parent --box-color

Child B override --box-color

Enable override

Scope Diagram

.parent { --box-color: #3b82f6 }

Child A
inherits --box-color

Child B
inherits --box-color

Child C
inherits --box-color

.parent {
  --box-color: #3b82f6;
}
/* All children inherit --box-color */
.child { background: var(--box-color); }

Step 4: Fallback Values

The var() function accepts an optional fallback value as the second argument. If the variable is not defined, the fallback is used instead. You can even chain fallbacks:

color: var(--brand-color, var(--accent-color, #000));

Toggle variables on and off below to see fallbacks in action.

--brand-color #3b82f6 (blue)

--accent-color #8b5cf6 (purple)

fallback #000000 (black) — always available

Resolution chain: var(--brand-color, var(--accent-color, #000))

Resolved color: #3b82f6

Source: --brand-color

/* Fallback chain */
.element {
  color: var(--brand-color, var(--accent-color, #000));
}

Step 5: Theme Switcher

CSS variables make theming easy. Define a set of variables for each theme, then swap them on a container using element.style.setProperty(). Click a theme below to apply it.

Ahmed Habib

Web Developer

This preview card is styled using CSS custom properties. Each theme changes the variables, and the entire UI updates instantly.

CSS Variables Theming

/* Light theme (active) */
.card {
  --theme-bg: #ffffff;
  --theme-text: #1f2937;
  --theme-accent: #3b82f6;
  --theme-border: #e5e7eb;
  --theme-muted-bg: #e5e7eb;
  --theme-muted-text: #1f2937;
}

About This Lab

CSS Custom Properties (variables) revolutionize how we write maintainable stylesheets. In this lab, you'll learn to declare and use variables, understand scope and inheritance, override values in nested selectors, build a dynamic theme switcher, calculate values with var() and calc(), and create responsive designs with fewer lines of code.

How It Works

Read each step's explanation of CSS variable concepts
Modify variables and see styles update instantly
Build a theme switcher from scratch
Experiment with scope and inheritance
Complete the quiz to test your understanding