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.