Why Declaring variables in CSS? - Purpose & Use Cases

The Big Idea

What if changing one line could update your entire website's look instantly?

The Scenario

Imagine you want to use the same color on many parts of your website. You write the color code everywhere, like background, text, and borders.

The Problem

If you decide to change that color later, you must find and update every single place manually. This takes time and you might miss some spots, causing inconsistent colors.

The Solution

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

Before vs After

✗ Before

background-color: #3498db;\ncolor: #3498db;\nborder-color: #3498db;

✓ After

:root { --main-color: #3498db; }\nbackground-color: var(--main-color);\ncolor: var(--main-color);\nborder-color: var(--main-color);

What It Enables

You can easily keep your website's style consistent and update it quickly without hunting for every color code.

Real Life Example

A company changes its brand color. With CSS variables, updating the brand color on the whole website is just one line of code change.

Key Takeaways

Writing the same value many times is slow and error-prone.

CSS variables let you store and reuse values easily.

Changing a variable updates all related styles instantly.