Variable scope in CSS - Mini Project: Build & Apply

Understanding CSS Variable Scope

📖 Scenario: You are creating a simple webpage with two sections. Each section should have a different background color using CSS variables. You will learn how CSS variables can be defined globally and locally, and how their scope affects the colors shown.

🎯 Goal: Build a webpage with two sections. Use a global CSS variable for the background color of the first section. Then, override that variable locally inside the second section to change its background color. This will show how CSS variable scope works.

📋 What You'll Learn

Create a global CSS variable --main-bg-color with the value #a0d8f1.

Use the global variable --main-bg-color to set the background color of the first section.

Inside the second section, override the --main-bg-color variable with the value #f1a0a0.

Use the overridden variable to set the background color of the second section.

Use semantic HTML elements and ensure the page is responsive.

💡 Why This Matters

🌍 Real World

CSS variables help web developers manage colors and styles consistently across a website. Understanding scope lets you customize parts of a page without repeating code.

💼 Career

Knowing CSS variable scope is important for front-end developers to write clean, maintainable, and scalable stylesheets.

1

Create the HTML structure with two sections

Write the HTML code to create a <main> element containing two <section> elements with class names section1 and section2. Each section should have a heading: <h2>Section 1</h2> and <h2>Section 2</h2> respectively.

CSS

Hint

Use semantic tags: <main> for the main content and <section> for each part.

2

Define a global CSS variable for background color

In the CSS, create a :root selector and define a CSS variable called --main-bg-color with the value #a0d8f1.

CSS

  
    Section 1
  
  
    Section 2
  


:root {
  /* Your code here */
}

Hint

The :root selector is used to define global CSS variables.

3

Use the global variable for the first section's background

Add CSS to set the background color of .section1 using the global CSS variable --main-bg-color.

CSS

  
    Section 1
  
  
    Section 2
  


:root {
  --main-bg-color: #a0d8f1;
}

.section1 {
  /* Your code here */
}

Hint

Use var(--main-bg-color) to access the CSS variable.

4

Override the variable locally for the second section

Inside the CSS for .section2, override the --main-bg-color variable with the value #f1a0a0. Then set the background color of .section2 using the overridden variable.

CSS

  
    Section 1
  
  
    Section 2
  


:root {
  --main-bg-color: #a0d8f1;
}

.section1 {
  background-color: var(--main-bg-color);
}

.section2 {
  /* Your code here */
}

Hint

Override the variable by declaring it inside .section2 and then use var(--main-bg-color) for the background color.

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