Variable scope in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding CSS Variable Scope

Consider the following CSS code. What color will the text inside the <div class='child'> be?

CSS

:root {
  --main-color: blue;
}
.parent {
  --main-color: red;
  color: var(--main-color);
}
.child {
  color: var(--main-color);
}

A The text will be blue because :root variables override local ones.

B The text will be black because the child does not define its own variable.

C The text will be red because the child inherits the parent's variable value.

D The text will be transparent because the variable is undefined in the child.

💡 Hint

Remember that CSS variables cascade and inherit from their closest ancestor that defines them.

The .child element inherits the --main-color variable from its closest ancestor with that variable defined, which is .parent. So the color is red.

📝 Syntax

intermediate

CSS Variable Scope Syntax Error

Which option contains a syntax error that prevents the CSS variable from being applied correctly?

CSS

:root {
  --main-bg-color: lightgray;
}
.container {
  --main-bg-color: white
  background-color: var(--main-bg-color);
}

A Variables cannot be defined inside classes, only in :root.

B Missing semicolon after <code>--main-bg-color: white</code> in <code>.container</code> block.

C Using <code>var(--main-bg-color)</code> instead of <code>var(main-bg-color)</code> causes error.

D Background color property should be <code>background</code> not <code>background-color</code>.

💡 Hint

Check punctuation carefully inside CSS blocks.

CSS requires semicolons after each declaration. Missing semicolon after --main-bg-color: white causes the next line to be invalid.

❓ rendering

advanced

Effect of Variable Scope on Nested Elements

Given this CSS, what background color will the <div class='nested'> have?

CSS

:root {
  --bg-color: yellow;
}
.outer {
  --bg-color: green;
  background-color: var(--bg-color);
}
.nested {
  background-color: var(--bg-color);
}

A Green, because .nested inherits from .outer if nested inside it.

B Yellow, because :root variable applies globally.

C Transparent, because .nested does not define the variable itself.

D Blue, because default background color is blue.

💡 Hint

CSS variables cascade down the DOM tree from the closest ancestor that defines them.

If .nested is inside .outer, it inherits --bg-color as green, so background is green.

❓ selector

advanced

CSS Variable Scope with Multiple Selectors

Which selector correctly limits the scope of the CSS variable --text-color to only .section elements?

A

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

B

.section {
  --text-color: red;
}
.article {
  color: var(--text-color);
}

C

.section {
  --text-color: red;
  color: var(--text-color);
}
.article {
  color: var(--text-color);
}

D

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

💡 Hint

Variables defined inside a selector only apply to elements matching that selector and their children.

Option D defines --text-color inside .section, so only .section and its children use red. Other elements use the :root value black.

❓ accessibility

expert

Accessibility Impact of CSS Variable Scope on Color Contrast

You have a CSS variable --text-color defined in :root as dark gray. Inside a .dark-mode container, it is redefined as light gray. Which statement about accessibility and variable scope is correct?

CSS

:root {
  --text-color: #333333;
}
.dark-mode {
  --text-color: #cccccc;
}
p {
  color: var(--text-color);
}

A Text inside <code>.dark-mode</code> will have better contrast on dark backgrounds due to scoped variable override.

B Scoped variables do not affect accessibility because colors are fixed by browser defaults.

C Redefining variables inside containers breaks keyboard navigation accessibility.

D Variables defined in :root override all scoped variables, so no contrast change occurs.

💡 Hint

Think about how variable scope allows different colors in different parts of the page for better readability.

Scoped CSS variables let you change colors inside containers like .dark-mode to improve contrast and readability, which helps accessibility.

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