24. CSS Variables

What you will learn

What CSS variables (custom properties) are
How to declare and use them
How to set fallback values
How to change variables for themes and components

What is a CSS variable?

A CSS variable (officially a custom property) stores a value once so you can reuse it everywhere. Change it in one place and the whole site updates. This website’s own colours and spacing are built this way.

Declaring and using

A variable name starts with two hyphens: --main-color.
Declare it inside a rule. Putting it in :root makes it available everywhere.
Use it with the var() function.

Example

<style>
  :root {
    --primary: #0d6efd;
    --navy: #082b59;
    --radius: 8px;
  }

  h2 { color: var(--navy); }
  .btn {
    background-color: var(--primary);
    color: white;
    padding: 10px 20px;
    border: 0;
    border-radius: var(--radius);
  }
  .card {
    border: 2px solid var(--primary);
    border-radius: var(--radius);
    padding: 12px;
  }
</style>

<h2>Variables in action</h2>
<div class="card">A card using the same colour and radius.</div>
<p><button class="btn" type="button">A button</button></p>

Output

Variables in action

A card using the same colour and radius.

Now try this in the live editor: change --primary to crimson. The card border and button change together.

Names are case sensitive

--Main and --main are different variables. Use lowercase with hyphens for consistency.

Fallback values

var() accepts a second value, used if the variable is not defined.

Syntax

.note {
  color: var(--note-color, #17345c);
}

Scope: overriding in one place

A variable declared inside a selector applies to that element and everything inside it. This lets you restyle one part of a page without writing new rules.

Example

<style>
  :root { --bg: #eaf5ff; --text: #082b59; }

  .panel {
    background-color: var(--bg);
    color: var(--text);
    padding: 14px;
    margin: 8px 0;
  }
  .panel.dark {
    --bg: #082b59;
    --text: #ffffff;
  }
</style>

<div class="panel">Light panel</div>
<div class="panel dark">Dark panel (variables overridden)</div>

Output

Light panel

Dark panel (variables overridden)

Dark mode with variables

A media query can swap variable values to follow the visitor’s system theme.

Syntax

:root {
  --bg: #ffffff;
  --text: #17345c;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1b33;
    --text: #e6f0ff;
  }
}

body {
  background-color: var(--bg);
  color: var(--text);
}

Variables with calc()

Example

<style>
  :root { --space: 8px; }
  .box {
    padding: calc(var(--space) * 2);
    margin-bottom: calc(var(--space) * 3);
    background-color: #eaf5ff;
  }
</style>

<div class="box">Padding is 16px (8px x 2)</div>

Changing variables with JavaScript

Variables can be changed while a page is running, which is how many theme switchers work. You will see this in the JavaScript course.

Why variables help

One change, everywhere. Update a brand colour in a single line.
Consistency. The same spacing and colours across the whole site.
Themes. Light and dark modes with a few lines.

Common mistakes

Forgetting the two hyphens in the name.
Writing var(primary) instead of var(--primary).
Using a variable that is declared inside a different rule, so it is out of scope.
Using variables in media query conditions. They do not work there.

Exercise

Declare a variable --accent with the value #0d6efd in :root, then use it as the border colour of .box (2px solid) with 12px of padding.

Show solution

<style>
  :root { --accent: #0d6efd; }
  .box {
    border: 2px solid var(--accent);
    padding: 12px;
    margin-bottom: 8px;
  }
</style>
<div class="box">Box one</div>
<div class="box">Box two</div>

Knowledge check

1. How does a CSS variable name begin?

With two hyphens, such as --primary.

2. Which function reads a variable?

var()

3. Where do you declare a variable that the whole page can use?

In the :root selector.

Summary

Declare variables as --name: value; and use them with var(--name).
Put shared ones in :root, and override them inside a selector.
Variables make themes and consistent design easy.