Using variables in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the value of color in this CSS snippet?

Given the CSS below, what color will the h1 text be rendered in the browser?

CSS

:root {
  --main-color: #3498db;
}
h1 {
  color: var(--main-color);
}

A The text color will be black (default).

B The text color will be blue (#3498db).

C The text color will be red.

D The text color will be transparent.

💡 Hint

Look at how the variable --main-color is defined and used.

The variable --main-color is set to #3498db in the root. The h1 uses var(--main-color) so it will have that blue color.

🧠 Conceptual

intermediate

Which CSS variable scope is correct for this behavior?

You want a CSS variable --btn-bg to have different values inside .card and outside it. Which scope should you use to achieve this?

A Define <code>--btn-bg</code> inside <code>.card</code> and also in <code>:root</code> with different values.

B Define <code>--btn-bg</code> only in <code>:root</code>.

C Define <code>--btn-bg</code> only inside <code>.card</code>.

D Define <code>--btn-bg</code> inside <code>body</code> only.

💡 Hint

Variables cascade and inherit from their scope.

Variables defined in :root apply globally. Defining --btn-bg inside .card overrides it only there, allowing different values inside and outside.

❓ selector

advanced

What color will the p text have?

Consider the CSS below. What color will the p inside .container be?

CSS

:root {
  --text-color: black;
}
.container {
  --text-color: red;
}
.container p {
  color: var(--text-color, blue);
}

A Blue

B Black

C Transparent

D Red

💡 Hint

Variables cascade and the closest scope applies.

The p inside .container inherits --text-color from .container which is red, so the text color is red.

❓ layout

advanced

How does using CSS variables improve layout flexibility?

Which statement best explains how CSS variables help when adjusting layout spacing?

A They allow changing spacing values in one place to update all related elements.

B They automatically resize elements based on screen size without media queries.

C They replace the need for Flexbox or Grid layouts.

D They prevent any layout changes once set.

💡 Hint

Think about how variables can be reused.

CSS variables let you define spacing once and reuse it. Changing the variable updates all places using it, making layout adjustments easier.

❓ accessibility

expert

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

Which approach using CSS variables best supports users who need high contrast themes?

A Use CSS variables only for font sizes, not colors.

B Use fixed colors in CSS without variables to ensure consistency.

C Define color variables and switch their values with a toggle to provide high contrast themes.

D Avoid using color variables to prevent confusion.

💡 Hint

Think about how variables can be changed dynamically.

Using CSS variables for colors allows easy switching between normal and high contrast themes by changing variable values, improving accessibility.