Variable scope in CSS - Browser Rendering Trace

Render Flow - Variable scope

Parse CSS file

↓

Identify :root variables

↓

Identify variables in selectors

↓

Build cascade and inheritance

↓

Apply variables based on scope

↓

Render styles with resolved values

The browser reads CSS variables from global (:root) and local selectors, then applies them based on where they are defined and used, resolving the final values during rendering.

Render Steps - 3 Steps

Code Added::root { --main-color: blue; }

Before

[ ]

No color variable defined, text uses default color (black).

→

After

[ ]

--main-color set globally to blue, but no element uses it yet.

The global variable --main-color is defined as blue, available to all elements unless overridden.

🔧 Browser Action:Stores variable in global scope for later use.

Code Sample

A paragraph inside a container uses a CSS variable for color; the variable is defined globally as blue but locally as red inside the container, so the paragraph text appears red.

CSS

<div class="container">
  <p class="text">Hello World</p>
</div>

CSS

:root {
  --main-color: blue;
}
.container {
  --main-color: red;
}
.text {
  color: var(--main-color);
}

Render Quiz - 3 Questions

After applying step 2, what is the value of --main-color inside the .container element?

A black

B blue

C red

D undefined

Common Confusions - 2 Topics

Why does my element not use the global variable value?

If a parent element defines the same variable locally, the child uses that local value instead of the global one. Variables follow normal CSS cascade and scope rules (see render_steps 2 and 3).

💡 Local variable definitions override global ones inside their subtree.

Can variables defined inside one selector be used outside it?

No. Variables defined inside a selector only apply to that selector and its children. Outside elements do not see those local variables (see render_steps 2).

💡 Variables have block scope like CSS properties.

Property Reference

Property	Scope	Visual Effect	Common Use
--variable-name	Global (:root)	Available everywhere unless overridden	Define default theme colors
--variable-name	Local (inside selector)	Overrides global variable within that selector's subtree	Customize styles for specific sections
var(--variable-name)	Usage	Uses the variable value from nearest scope	Apply colors, sizes, or other CSS values dynamically

Concept Snapshot

CSS variables can be defined globally (:root) or locally inside selectors. Local variables override global ones inside their scope. Use var(--name) to access the nearest scoped variable. Variables follow normal CSS cascade and inheritance rules. This allows flexible theming and style customization.

Practice

1. Where are CSS variables defined to be accessible throughout the entire webpage?

easy

A. Inside any class selector

B. Inside the :root selector

C. Inside an ID selector

D. Inside a media query only

Solution

1. Step 1: Understand global scope in CSS variables

   CSS variables defined inside :root are global and accessible anywhere.

2. Step 2: Compare with local scopes

   Variables inside class or ID selectors are local and not accessible globally.

3. Final Answer:

   Inside the :root selector -> Option B

4. Quick Check:

   Global CSS variables = :root [OK]

Hint: Global CSS variables live in :root [OK]

Common Mistakes:

• Thinking variables in classes are global
• Confusing media queries with variable scope
• Assuming ID selectors define global variables

2. Which of the following is the correct syntax to declare a CSS variable named --main-color with value blue inside a class .header?

easy

A. .header { main-color: blue; }

B. .header { var(--main-color): blue; }

C. .header { --main-color = blue; }

D. .header { --main-color: blue; }

Solution

1. Step 1: Recall CSS variable declaration syntax

   CSS variables start with two dashes and use colon to assign value, e.g., --var-name: value;.

2. Step 2: Check each option

   .header { --main-color: blue; } uses correct syntax. .header { var(--main-color): blue; } incorrectly uses var() on left side. .header { --main-color = blue; } uses equals sign which is invalid. .header { main-color: blue; } misses dashes.

3. Final Answer:

   .header { --main-color: blue; } -> Option D

4. Quick Check:

   Variable declaration = --name: value; [OK]

Hint: Declare variables with --name: value; inside selectors [OK]

Common Mistakes:

• Using equals sign instead of colon
• Using var() on left side of declaration
• Omitting the double dashes

3. Given the CSS below, what color will the text inside <div class='box'> be?

:root { --text-color: black; } .box { --text-color: red; color: var(--text-color); }

medium

A. Red

B. Default browser color

C. Black

D. Blue

Solution

1. Step 1: Identify variable scopes

   --text-color is globally black in :root, but locally red inside .box.

2. Step 2: Determine which variable applies

   Inside .box, local variable overrides global, so color: var(--text-color) uses red.

3. Final Answer:

   Red -> Option A

4. Quick Check:

   Local variable overrides global = red [OK]

Hint: Local CSS variables override global ones inside their scope [OK]

Common Mistakes:

• Assuming global variable always applies
• Confusing variable name with property name
• Ignoring local variable overrides

4. What is wrong with this CSS code if the variable --bg-color is not applying inside .card?

:root { --bg-color: yellow; } .card { background-color: var(--bg-color); } .card .content { --bg-color: green; }

medium

A. The variable --bg-color inside .content does not affect .card

B. Variables cannot be used inside background-color

C. The variable name is invalid without camelCase

D. The :root selector cannot define variables

Solution

1. Step 1: Understand variable scope in nested selectors

   Variables defined inside .card .content are local to that selector only.

2. Step 2: Check where background-color is applied

   background-color is set on .card, which uses the global variable from :root.

3. Final Answer:

   The variable --bg-color inside .content does not affect .card -> Option A

4. Quick Check:

   Local variables only affect their own scope [OK]

Hint: Local variables don't affect parent selectors [OK]

Common Mistakes:

• Thinking nested variables override parents
• Believing variables can't be used in properties
• Misunderstanding variable naming rules

5. You want a CSS variable --button-color to be blue globally but red only inside .alert buttons. Which CSS setup achieves this correctly?

hard

A. :root { --button-color: red; } button { color: var(--button-color); } .alert button { color: red; }

B. .alert button { --button-color: blue; } :root { --button-color: red; } button { color: var(--button-color); }

C. :root { --button-color: blue; } .alert button { --button-color: red; } button { color: var(--button-color); }

D. button { --button-color: blue; } .alert button { --button-color: red; color: var(--button-color); }

Solution

1. Step 1: Define global variable in :root

   Setting --button-color: blue in :root makes it global.

2. Step 2: Override variable locally inside .alert button

   Setting --button-color: red inside .alert button overrides global only there.

3. Step 3: Use variable in button color property

   Using color: var(--button-color) in button applies correct color depending on scope.

4. Final Answer:

   :root { --button-color: blue; } .alert button { --button-color: red; } button { color: var(--button-color); } -> Option C

5. Quick Check:

   Global in :root, local override in selector [OK]

Hint: Set global in :root, override locally in selector [OK]

Common Mistakes:

• Reversing global and local variable values
• Not using variable in property for local override
• Defining variables only inside buttons without global