Demon Tech Roadmap

CSS

CSS Variables

CSS variables store reusable values throughout a stylesheet.

Read Time

5 min read

Difficulty

Beginner

Last Updated

Jun 15, 2026

Version

v1.0.0

Introduction

CSS custom properties act as variables holding colors, fonts, or sizes. Instead of typing the same exact color code fifty times, developers store it in a variable. Changing the variable updates the color everywhere instantly.

Syntax

1/* variable syntax */
2:root {
3  --main-color: red;
4}
5p {
6  color: var(--main-color);
7}

Example

1/* this sets a theme color */
2:root {
3  --primary: #3498db;
4}
5
6button {
7  background-color: var(--primary);
8  border: 2px solid var(--primary);
9}

Key Points

The `:root` selector creates global variables.
Variable names must begin with two dashes.
The `var()` function accesses the stored value.
JavaScript can update these variables live.

Up Next

Continue your journey with the next topic.

Go to CSS Animations ❯