CSS Variables (Custom Properties)
A CSS variable stores a value, like a colour or a size, so you can write it once and use it in many places.
Why Use Variables?
Imagine your website uses the brand blue #264de4 in fifty places. If the client asks for a different blue, you must find and change all fifty. With a variable you change it in one place.
Declaring and Using a Variable
- A variable name starts with two dashes:
--brand - You read it with the
var()function:var(--brand) - Variables are usually declared on
:root(the<html>element) so the whole page can use them
Example
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--brand: #264de4;
--accent: #f97316;
--radius: 8px;
--space: 16px;
}
body { font-family: Arial, sans-serif; }
.card {
border: 2px solid var(--brand);
border-radius: var(--radius);
padding: var(--space);
margin-bottom: var(--space);
}
.card h3 { color: var(--brand); }
.btn {
background-color: var(--accent);
color: white;
border: none;
padding: 8px var(--space);
border-radius: var(--radius);
}
</style>
</head>
<body>
<div class="card">
<h3>Web Development</h3>
<p>HTML, CSS and JavaScript in 3 months.</p>
<button class="btn">Enrol now</button>
</div>
</body>
</html>Change --brand to seagreen and run it again. The border and the heading both change.
Custom property names are case-sensitive: --Brand and --brand are two different variables.
Fallback Values
If a variable is not defined, you can give a backup value after a comma:
Example
.box {
color: var(--text-color, #333333);
}If --text-color does not exist, the colour is #333333.
Variables Follow the Cascade
Variables are inherited like color. A variable set on a parent is visible to all its children, and you can override it on any element. This makes variations very easy.
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial, sans-serif; }
.alert {
--alert-color: #264de4;
border-left: 6px solid var(--alert-color);
background-color: #f8fafc;
color: var(--alert-color);
padding: 12px;
margin-bottom: 10px;
}
.alert.success { --alert-color: seagreen; }
.alert.danger { --alert-color: crimson; }
</style>
</head>
<body>
<div class="alert">Classes start on Monday.</div>
<div class="alert success">Your fee has been received.</div>
<div class="alert danger">The form has 2 errors.</div>
</body>
</html>One .alert rule does all the work. Each variation only changes one variable.
Variables with calc()
You can do maths with variables using calc():
Example
:root {
--space: 8px;
}
.section {
padding: calc(var(--space) * 4); /* 32px */
margin-bottom: calc(var(--space) * 2); /* 16px */
}A variable cannot be glued to a unit. var(--size)px does not work. Write calc(var(--size) * 1px) instead, or store the unit in the variable.
Changing Variables with JavaScript
JavaScript can read and change variables, and everything that uses them updates at once.
Example
<!DOCTYPE html>
<html>
<head>
<style>
:root { --theme: #264de4; }
body { font-family: Arial, sans-serif; }
h1 { color: var(--theme); }
button {
background-color: var(--theme);
color: white;
border: none;
padding: 8px 14px;
margin-right: 6px;
}
</style>
</head>
<body>
<h1>Pick a theme colour</h1>
<button onclick="setTheme('#264de4')">Blue</button>
<button onclick="setTheme('seagreen')">Green</button>
<button onclick="setTheme('crimson')">Red</button>
<p id="info">Current: #264de4</p>
<script>
function setTheme(colour) {
document.documentElement.style.setProperty('--theme', colour);
document.getElementById('info').innerHTML = 'Current: ' + colour;
}
</script>
</body>
</html>Good Habits
| Do | Avoid |
|---|---|
Name variables by purpose: --color-primary | Names that describe the value: --blue |
Keep site-wide values in :root | Declaring the same variable in many places |
| Use them for colours, spacing, radius and fonts | A variable for every single value |
Exercise
Exercise
Which line correctly uses a variable named --main-color?