Using variables in CSS - Browser Rendering Trace

Render Flow - Using variables

Parse CSS file

↓

Identify :root selector

↓

Store custom properties (variables)

↓

Match elements with var() usage

↓

Replace var() with stored values

↓

Apply styles

↓

Layout

↓

Paint

↓

Composite

The browser reads CSS, finds variables declared in :root, replaces var() calls with those values, then applies styles and renders the page.

Render Steps - 2 Steps

Code Added::root { --main-color: #3498db; --padding-size: 1.5rem; }

Before

[ ]
 (empty white background)

→

After

[ ]
 (still empty white background, variables stored internally)

Variables are declared but not visible yet; browser stores them for later use.

🔧 Browser Action:Stores custom properties in the CSSOM for later substitution

Code Sample

A blue box with white bold 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;
  font-weight: bold;
  border-radius: 0.5rem;
}

Render Quiz - 3 Questions

After applying step 2, what color is the box background?

A Black

B White

C Blue (#3498db)

D Transparent

Common Confusions - 3 Topics

Why doesn't my variable work if I misspell its name?

CSS variables are case-sensitive and must match exactly. If the name is wrong, the browser ignores the var() and falls back to default or no style.

💡 Always double-check variable names for typos to see the expected colors or spacing.

Why can't I use variables in some CSS properties like 'border-radius'?

You can use variables in any property that accepts the value type. If the variable value is invalid for that property, it won't apply. Make sure the variable holds a valid value.

💡 Variables must hold correct value types matching the CSS property.

Why does the variable value not update when I change it in :root?

The browser applies variables at load or when styles change. If you change variables dynamically, you need to trigger style updates or use JavaScript to reflect changes.

💡 Variables are static unless styles are re-applied or updated dynamically.

Property Reference

Property	Value Example	Visual Effect	Common Use
--main-color	#3498db	Sets a blue color used for backgrounds or text	Theme colors
--padding-size	1.5rem	Controls space inside elements	Consistent spacing
var(--main-color)	var(--main-color)	Uses the variable value where applied	Reuse colors or sizes
var(--padding-size)	var(--padding-size)	Uses the variable value for padding	Uniform padding

Concept Snapshot

CSS variables are custom properties declared with --name inside selectors like :root. Use var(--name) to apply the stored value anywhere in CSS. Variables help keep colors, sizes, and other values consistent. They are case-sensitive and must hold valid CSS values. Changing variables updates all uses automatically after reflow.