Why Using variables in CSS? - Purpose & Use Cases

The Big Idea

What if you could change your whole website's color by editing just one line of code?

The Scenario

Imagine you want to style a website with a specific shade of blue used in many places. You write the color code everywhere in your CSS, like background, borders, and text.

The Problem

If you decide to change that blue later, you must find and replace every single color code manually. This is slow, easy to miss spots, and can cause inconsistent colors.

The Solution

CSS variables let you store a color once and reuse it everywhere. Change the variable value once, and all places using it update automatically.

Before vs After

✗ Before

h1 { color: #0055cc; }
p { border-color: #0055cc; }

✓ After

:root {
  --main-blue: #0055cc;
}
h1 { color: var(--main-blue); }
p { border-color: var(--main-blue); }

What It Enables

You can easily maintain consistent styles and quickly update your design by changing just one value.

Real Life Example

A company rebrands with a new color palette. Using CSS variables, they update the main brand color in one place, and the entire website changes instantly.

Key Takeaways

Variables store reusable values like colors or sizes.

Changing a variable updates all uses automatically.

This saves time and prevents mistakes in styling.