Variable scope in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is variable scope in CSS?

Variable scope in CSS means where a CSS custom property (variable) can be used or accessed in your styles. It can be global or limited to a specific part of the page.

beginner

How do you declare a CSS variable globally?

You declare a CSS variable globally by defining it inside the :root selector. For example: :root { --main-color: blue; } makes --main-color available everywhere.

intermediate

What happens if you declare the same CSS variable inside a specific selector?

The variable inside the specific selector overrides the global one only within that selector's scope. Outside, the global variable is used.

intermediate

Example: What color will the text be?

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

Text inside elements with class special will be red because the local variable --text-color overrides the global one. Other elements use black.

beginner

Why is understanding CSS variable scope useful?

It helps you organize styles better, avoid conflicts, and create themes by changing variables in specific parts without rewriting all styles.

Where should you declare a CSS variable to make it available everywhere?

A Inside a media query only

B :root selector

C Inside a specific class selector

D Inside a pseudo-class

Declaring variables inside :root makes them global and accessible throughout the CSS.

If a variable is declared both globally and inside a class, which one is used inside that class?

A None, variable is ignored

B Global variable

C Both variables combined

D Variable inside the class

The variable inside the class overrides the global variable within that class's scope.

What CSS function is used to access a variable's value?

A value()

B get()

C var()

D use()

The var() function is used to get the value of a CSS custom property.

Can CSS variables be scoped inside media queries?

A Yes, variables declared inside media queries only apply there

B No, variables are always global

C Only if declared inside :root

D Variables cannot be used in media queries

Variables declared inside media queries are scoped to those queries and apply only when conditions match.

What is the benefit of scoping CSS variables locally?

A To avoid conflicts and customize styles in parts of the page

B To disable variables

C To make variables global

D To reduce CSS file size

Local scoping helps avoid conflicts and allows different parts of the page to have customized styles.

Explain CSS variable scope and how it affects styling on a webpage.

Think about where you declare variables and where they can be used.

Describe a scenario where you would use local CSS variables instead of global ones.

Consider theming or special sections with unique colors.

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