Why CSS variables are used - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why use CSS variables for colors?

You want to change the main color of your website easily in one place. Why are CSS variables helpful here?

A They make the website load faster by compressing colors.

B They automatically change colors based on the time of day without extra code.

C They prevent users from changing colors in their browser.

D They let you store the color once and reuse it everywhere, so changing it in one place updates all uses.

💡 Hint

Think about how many places you might use the same color in your CSS.

CSS variables let you define a value once and reuse it multiple times. This makes it easy to update styles consistently by changing the variable value in one place.

📝 Syntax

intermediate

How to declare and use a CSS variable?

Which option correctly declares a CSS variable for font size and uses it in a paragraph?

A :root { --font-size = 1.2rem; } p { font-size: var(--font-size); }

B :root { --font-size: 1.2rem; } p { font-size: var(--font-size); }

C :root { --font-size: 1.2rem; } p { font-size: --font-size; }

D :root { font-size: --1.2rem; } p { font-size: var(font-size); }

💡 Hint

CSS variables start with two dashes and are accessed with var().

CSS variables are declared with two dashes and accessed using var(). The correct syntax is shown in option B.

❓ rendering

advanced

What is the visible effect of this CSS code?

Given this CSS, what color will the heading text show?

:root { --main-color: blue; }
h1 { color: var(--main-color); }
:root { --main-color: red; }

CSS

:root { --main-color: blue; }
h1 { color: var(--main-color); }
:root { --main-color: red; }

A The heading text will be blue because the first declaration is used.

B The heading text will be purple because the colors mix.

C The heading text will be red because the last variable declaration overrides the first.

D The heading text will be black because the variable is invalid.

💡 Hint

Later CSS rules override earlier ones if they have the same specificity.

CSS variables follow normal CSS cascading rules. The last declaration of --main-color is red, so the heading uses red.

❓ selector

advanced

Which selector correctly changes a CSS variable only inside a section?

You want to set --bg-color to green only inside a

element. Which CSS code does this?

A section { --bg-color: green; }

B :root section { --bg-color: green; }

C section::root { --bg-color: green; }

D body > section { --bg-color: green; }

💡 Hint

Variables can be scoped to any selector by declaring them inside it.

Declaring --bg-color inside section applies it only to that section and its children. Option A is correct.

❓ accessibility

expert

How do CSS variables improve accessibility for users with visual impairments?

Which statement best explains how CSS variables help make websites easier to customize for accessibility?

A They allow users or developers to change colors and sizes easily by updating variables, supporting high contrast or larger text modes.

B They automatically detect screen readers and adjust content accordingly.

C They prevent users from changing font sizes, keeping design consistent.

D They replace all images with text descriptions for screen readers.

💡 Hint

Think about how changing one value can affect many style properties.

CSS variables let developers create themes or modes (like high contrast or large text) by changing variable values, making accessibility easier.

Practice

1. Why are CSS variables used in web design?

easy

A. To create animations without JavaScript

B. To add images to a webpage

C. To write HTML code faster

D. To store reusable values like colors and sizes

Solution

1. Step 1: Understand the purpose of CSS variables

   CSS variables hold values such as colors or sizes that can be reused throughout the stylesheet.

2. Step 2: Compare options to the purpose

   Only To store reusable values like colors and sizes correctly describes storing reusable values. Other options describe unrelated tasks.

3. Final Answer:

   To store reusable values like colors and sizes -> Option D

4. Quick Check:

   CSS variables = reusable values [OK]

Hint: CSS variables store values to reuse easily [OK]

Common Mistakes:

• Thinking CSS variables create animations
• Confusing CSS variables with HTML features
• Believing CSS variables add images

2. Which of the following is the correct syntax to declare a CSS variable named --main-color with the value #3498db?

easy

A. body { main-color = #3498db; }

B. :root { --main-color: #3498db; }

C. :root { main-color: #3498db; }

D. body { --main-color = #3498db; }

Solution

1. Step 1: Identify correct CSS variable declaration syntax

   CSS variables are declared with two dashes before the name and a colon to assign the value inside a selector like :root.

2. Step 2: Check each option for syntax correctness

   :root { --main-color: #3498db; } uses :root { --main-color: #3498db; } which is correct. Others use wrong selectors or assignment operators.

3. Final Answer:

   :root { --main-color: #3498db; } -> Option B

4. Quick Check:

   CSS variable syntax = colon and double dash [OK]

Hint: CSS variables start with -- and use colon : [OK]

Common Mistakes:

• Using = instead of : to assign values
• Omitting the double dashes -- before variable name
• Declaring variables outside a selector block

3. What will be the background color of the <div> in this CSS?

:root { --bg-color: lightgreen; } div { background-color: var(--bg-color); }

medium

A. lightgreen

B. white

C. transparent

D. black

Solution

1. Step 1: Understand variable declaration and usage

   The variable --bg-color is set to lightgreen in :root, making it global.

2. Step 2: Check how variable is used in div

   The div uses background-color: var(--bg-color); which applies the variable's value.

3. Final Answer:

   lightgreen -> Option A

4. Quick Check:

   var(--bg-color) = lightgreen [OK]

Hint: var(--name) uses the variable's value [OK]

Common Mistakes:

• Forgetting to use var() to access variables
• Assuming default color if variable is set
• Confusing variable name syntax

4. Identify the error in this CSS code using variables:

:root { --text-color: blue } p { color: var(text-color); }

medium

A. Missing semicolon after variable declaration

B. Variables cannot be used inside p selector

C. Incorrect variable name usage inside var() function

D. Variable names cannot have dashes

Solution

1. Step 1: Check variable declaration syntax

   The variable --text-color is declared correctly except missing semicolon, but CSS allows last property without semicolon.

2. Step 2: Check variable usage syntax

   Inside var(), the variable name must include the double dashes --. Here it is missing.

3. Final Answer:

   Incorrect variable name usage inside var() function -> Option C

4. Quick Check:

   var() needs -- before variable name [OK]

Hint: Use var(--variable-name), include the dashes [OK]

Common Mistakes:

• Omitting -- inside var()
• Thinking semicolon is always required last
• Believing variables can't be used in selectors

5. You want to create a website theme with a main color that can be changed easily. Which approach using CSS variables is best?

hard

A. Declare --main-color in :root and use var(--main-color) everywhere

B. Write the color value directly in every CSS rule

C. Use JavaScript to change colors without CSS variables

D. Create separate CSS files for each color and switch files

Solution

1. Step 1: Understand the goal of easy theme color changes

   Using CSS variables declared in :root allows changing one value to update all uses.

2. Step 2: Evaluate each option for maintainability

   Declare --main-color in :root and use var(--main-color) everywhere uses variables globally, making updates simple. Options B, C, and D are less efficient or more complex.

3. Final Answer:

   Declare --main-color in :root and use var(--main-color) everywhere -> Option A

4. Quick Check:

   Global CSS variables simplify theme changes [OK]

Hint: Use :root variables for easy global changes [OK]

Common Mistakes:

• Hardcoding colors everywhere
• Relying only on JavaScript for styling
• Managing multiple CSS files unnecessarily