CSS Variables & Custom Properties

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

Web Development v1.0.0 26 uses

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

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

X Facebook LinkedIn Reddit WhatsApp Telegram Pinterest Email

More Labs in Web Development

CSS Box Model

Web Development

Visualize content, padding, border, and margin layers with an interactive box model explorer.

JSON & APIs

Web Development

Learn JSON syntax, parse and build data structures, and explore how REST APIs work interactively.

Responsive Design & Media Queries

Web Development

Build layouts that adapt to any screen size using media queries, fluid grids, and responsive units.

CSS Variables & Custom Properties

Step 1: What are CSS Variables?

Step 2: Declaring & Using

Preview Card

Step 3: Scope & Inheritance

Step 4: Fallback Values

Step 5: Theme Switcher

Step 6: Knowledge Check

About This Lab

How It Works

More Labs in Web Development

CSS Box Model

JSON & APIs

Responsive Design & Media Queries