CSS Custom Properties Explained

Your Website's Secret Storage Boxes

Imagine you painted every wall in your house a different shade of blue — and then decided you wanted them all to be green instead. Without a system, you'd have to repaint every single wall one by one. That's what coding a website feels like without custom properties.

CSS Custom Properties (also called CSS Variables) are like labeled storage boxes you fill once and reuse forever. You put a color, a font size, or any value into a box, give the box a name, and then use that name everywhere instead of typing the value over and over.

When you want to change that color later, you open one box and change it — and every wall (every part of your website) that uses that box updates automatically.

Here's what they look like. You define a custom property with a -- (dash-dash) prefix:

:root {
  --brand-color: #6ee7b7;
  --main-font: 'Sora', sans-serif;
  --spacing: 16px;
}

One Change, Everywhere

Without custom properties, if you decide to change your brand's main color, you might have to hunt through hundreds of lines of CSS finding every place you typed #6ee7b7. Miss one? Inconsistent design. Tedious, error-prone, and slow.

Custom properties solve this completely. Change the value in one place, and every usage updates at the same time. This is especially powerful for:

• Brand colors — update your entire site's palette from one spot
• Typography sizes — change heading sizes globally in seconds
• Spacing and layout — adjust margins and padding across pages instantly
• Dark/light themes — switch entire color schemes by changing a few values

The Two-Step System

Using custom properties takes two steps: define them once, then use them everywhere.

/* Define once, in :root */
:root {
  --primary:   #6ee7b7;
  --bg-dark:    #0c0e13;
  --text-light: #e2e4e9;
}

/* Use anywhere with var() */
.button {
  background: var(--primary);
  color:       var(--bg-dark);
}

h1 {
  color: var(--text-light);
}

A Simple Color System

Here's a real-world example. Say you're building a website and want to use the same colors everywhere. Define them at the top of your CSS, then use them throughout your stylesheet:

/* Step 1: Define your design tokens */
:root {
  --color-brand:   #6ee7b7;
  --color-danger:   #f87171;
  --color-surface:  #13161d;
  --color-text:    #e2e4e9;
  --size-base:     16px;
}

/* Step 2: Use them everywhere — no magic numbers */
.card {
  background: var(--color-surface);
  color:       var(--color-text);
  padding:     var(--size-base);
  border-radius: 12px;
}

.alert {
  background: var(--color-danger);
  color: white;
  padding: var(--size-base);
}

/* Now changing --color-brand updates every button site-wide */
button {
  background: var(--color-brand);
}

Knowledge Check

Test what you learned with this quick quiz.