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.

Practice

1. What is the main purpose of CSS variables?

easy

A. To store reusable values like colors and sizes

B. To create new HTML elements

C. To write JavaScript code inside CSS

D. To add comments in CSS files

Solution

1. Step 1: Understand what CSS variables do

   CSS variables hold values that can be reused throughout the stylesheet, such as colors or font sizes.

2. Step 2: Compare options with this purpose

   Only To store reusable values like colors and sizes describes storing reusable values; others describe unrelated tasks.

3. Final Answer:

   To store reusable values like colors and sizes -> Option A

4. Quick Check:

   CSS variables = reusable values [OK]

Hint: CSS variables store values you reuse often [OK]

Common Mistakes:

• Thinking CSS variables create HTML elements
• Confusing CSS variables with JavaScript
• Believing CSS variables add comments

2. Which is the correct way to define a CSS variable for a primary color globally?

easy

A. :root { --primary-color: #3498db; }

B. body { primary-color: #3498db; }

C. :root { primary-color = #3498db; }

D. html { --primary-color #3498db; }

Solution

1. Step 1: Recall CSS variable syntax

   Variables are defined with two dashes and a colon inside a selector, usually :root for global scope.

2. Step 2: Check each option's syntax

   :root { --primary-color: #3498db; } uses correct syntax: :root { --name: value; }. Others have missing dashes, wrong selectors, or wrong assignment.

3. Final Answer:

   :root { --primary-color: #3498db; } -> Option A

4. Quick Check:

   Define variables with --name: value; inside :root [OK]

Hint: Use :root and --var-name: value; to define variables [OK]

Common Mistakes:

• Missing double dashes before variable name
• Using = instead of : for assignment
• Defining variables outside :root for global use

3. Given the CSS below, what color will the paragraph text be?

:root { --main-color: #ff0000; } p { color: var(--main-color); }

medium

A. Blue

B. Green

C. Black

D. Red

Solution

1. Step 1: Identify the variable value

   The variable --main-color is set to #ff0000, which is red.

2. Step 2: Check how the variable is used

   The paragraph's color is set using var(--main-color), so it uses the red color.

3. Final Answer:

   Red -> Option D

4. Quick Check:

   var(--main-color) = #ff0000 (red) [OK]

Hint: Match variable value hex to color name [OK]

Common Mistakes:

• Ignoring the variable and using default color
• Confusing hex codes with other colors
• Not using var() to apply variable

4. What is wrong with this CSS code?

:root { --font-size 16px; } h1 { font-size: var(--font-size); }

medium

A. Variable name should not start with dashes

B. Missing colon after --font-size in variable definition

C. Using var() incorrectly in h1 font-size

D. font-size property cannot use variables

Solution

1. Step 1: Check variable definition syntax

   The variable definition is missing a colon after --font-size; it should be --font-size: 16px;

2. Step 2: Verify usage of var()

   The usage var(--font-size) is correct in h1 font-size property.

3. Final Answer:

   Missing colon after --font-size in variable definition -> Option B

4. Quick Check:

   Variable definitions need colon after name [OK]

Hint: Variable definitions need colon after name [OK]

Common Mistakes:

• Forgetting colon in variable definition
• Thinking var() usage is wrong
• Believing variable names can't start with --

5. You want to create a theme with two colors using CSS variables: primary as blue (#0000ff) and secondary as gray (#888888). How do you apply these variables to style a button's background and border color?

hard

A. :root { --primary: blue; --secondary: gray; } button { background-color: --primary; border: 2px solid --secondary; }

B. :root { primary: #0000ff; secondary: #888888; } button { background-color: primary; border: 2px solid secondary; }

C. :root { --primary: #0000ff; --secondary: #888888; } button { background-color: var(--primary); border: 2px solid var(--secondary); }

D. button { --primary: #0000ff; --secondary: #888888; background-color: var(primary); border: 2px solid var(secondary); }

Solution

1. Step 1: Define variables globally with correct syntax

   Variables must be defined inside :root with double dashes and colon, e.g., --primary: #0000ff;

2. Step 2: Use variables with var() in button styles

   Apply variables using var(--primary) for background and var(--secondary) for border color.

3. Final Answer:

   :root { --primary: #0000ff; --secondary: #888888; } button { background-color: var(--primary); border: 2px solid var(--secondary); } -> Option C

4. Quick Check:

   Define with --name: value; use with var(--name) [OK]

Hint: Define variables in :root and use var(--name) to apply [OK]

Common Mistakes:

• Omitting -- in variable names
• Not using var() when applying variables
• Defining variables inside button instead of :root