Bird
Raised Fist0
CSSmarkup~5 mins

Variable scope in CSS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

Variable scope in CSS decides where a variable can be used. It helps keep styles organized and avoid mistakes.

When you want a color variable to be used only inside one section of a webpage.
When you need a font size variable that applies to the whole page.
When you want to change a variable for a specific component without affecting others.
When you want to keep your CSS clean by limiting variable use to certain parts.
Syntax
CSS
:root { --main-color: blue; } 

section { --section-color: green; }

Variables defined in :root are global and can be used anywhere.

Variables defined inside a selector like section are local to that selector and its children.

Examples
This sets a global background color variable used by the whole page.
CSS
:root {
  --main-bg: lightgray;
}

body {
  background-color: var(--main-bg);
}
The --text-color variable is local to article. Paragraphs outside article use black as fallback.
CSS
article {
  --text-color: darkred;
  color: var(--text-color);
}

p {
  color: var(--text-color, black);
}
The header uses its local font size variable, while footer uses the global one.
CSS
:root {
  --font-size: 1rem;
}

header {
  --font-size: 1.5rem;
  font-size: var(--font-size);
}

footer {
  font-size: var(--font-size);
}
Sample Program

The global variable --main-color is blue. Inside the section, it is overridden to green. Paragraphs inside the section show green text, others show blue.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>CSS Variable Scope Example</title>
<style>
  :root {
    --main-color: blue;
  }
  section {
    --main-color: green;
    color: var(--main-color);
    padding: 1rem;
    border: 2px solid var(--main-color);
    margin-bottom: 1rem;
  }
  p {
    color: var(--main-color);
  }
</style>
</head>
<body>
  <p>This paragraph uses the global main color.</p>
  <section>
    <p>This paragraph uses the section's main color.</p>
  </section>
  <p>This paragraph again uses the global main color.</p>
</body>
</html>
OutputSuccess
Important Notes

Use :root to define variables that should be available everywhere.

Variables inside selectors only affect that selector and its children.

If a variable is not found locally, CSS looks up to the parent scopes until it finds it or uses fallback.

Summary

CSS variables have scope: global (usually :root) or local (inside selectors).

Local variables override global ones inside their scope.

Understanding scope helps keep styles organized and predictable.

Practice

(1/5)
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