Declaring variables in CSS - Browser Rendering Trace

Render Flow - Declaring variables

Parse CSS file

↓

Identify :root selector

↓

Read --variable declarations

↓

Store variables in CSSOM

↓

Apply variables where used

↓

Render styles with variable values

The browser reads the CSS, finds variable declarations inside selectors like :root, stores them, and then replaces variable uses with their values during rendering.

Render Steps - 3 Steps

Code Added::root { --main-color: #3498db; }

Before

[ ] (empty white background)

→

After

[ ] (still empty white background, no visible change)

Declared a CSS variable --main-color but no element uses it yet, so no visible change.

🔧 Browser Action:Stores --main-color in CSSOM for later use.

Code Sample

A blue box with white text and padding, using CSS variables for color and padding.

CSS

<div class="box">Hello</div>

CSS

:root {
  --main-color: #3498db;
  --padding-size: 1.5rem;
}
.box {
  background-color: var(--main-color);
  padding: var(--padding-size);
  color: white;
  border-radius: 0.5rem;
  width: 10rem;
  text-align: center;
}

Render Quiz - 3 Questions

After step 3, what color is the box's background?

A Blue (#3498db)

B White

C Black

D Transparent

Common Confusions - 2 Topics

Why doesn't my variable change the color when I use var(--main-color)?

Make sure the variable is declared in a selector that applies to the element or globally in :root. Also, check for typos in the variable name.

💡 Variables must be declared before use and spelled exactly the same.

Why do I see no padding even though I used var(--padding-size)?

If the variable is not declared or misspelled, var() falls back to nothing, so padding is zero. Always declare variables before using them.

💡 If var() is empty, the style property acts as if missing.

Property Reference

Property	Value Applied	Description	Visual Effect	Common Use
--main-color	#3498db	Custom property for main color	Sets background or text color	Theme colors
--padding-size	1.5rem	Custom property for padding size	Adds space inside elements	Consistent spacing
var(--variable-name)	Value of variable	Uses the declared variable	Applies stored value visually	Reusable styles

Concept Snapshot

CSS variables are declared with --name inside selectors like :root. Use var(--name) to apply them. Variables store reusable values like colors or spacing. Declaring in :root makes them global. If variable is missing, var() returns nothing. Variables help keep styles consistent and easy to update.