Declaring variables in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the correct way to declare a CSS variable for primary color?

Choose the option that correctly declares a CSS variable named --primary-color with the value #3498db inside the :root selector.

A :root { var(--primary-color): #3498db; }

B :root { primary-color: #3498db; }

C :root { $primary-color: #3498db; }

D :root { --primary-color: #3498db; }

💡 Hint

CSS variables start with two dashes and are declared inside a selector like :root.

CSS variables must be declared with two dashes (--) and a value inside a selector block. The :root selector is commonly used to declare global variables.

🧠 Conceptual

intermediate

How do CSS variables inherit values?

If a CSS variable is declared inside a body selector, which statement is true about its availability?

A The variable is available globally to the entire document.

B The variable is only available to the <code>body</code> element itself.

C The variable is available to all elements inside <code>body</code> unless overridden.

D The variable is not available anywhere unless declared in <code>:root</code>.

💡 Hint

Think about how CSS inheritance works with selectors.

CSS variables declared inside a selector are inherited by its child elements unless overridden by another declaration.

❓ selector

advanced

Which selector correctly uses a CSS variable for background color?

Given the variable --bg-color declared in :root, which CSS rule correctly applies it as a background color to all section elements?

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

B section { background-color: var(--bg-color); }

C section { background-color: $bg-color; }

D section { background-color: var(bg-color); }

💡 Hint

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

To use a CSS variable, you must call it with var() and include the two dashes in the variable name.

❓ layout

advanced

How can CSS variables help create a responsive layout?

Which option shows a CSS variable declaration that changes based on screen width using media queries?

A :root { --gap: 1rem; } @media (min-width: 600px) { :root { --gap: 2rem; } }

B :root { --gap: 1rem; } @media (min-width: 600px) { body { --gap: 2rem; } }

C :root { --gap: 1rem; } @media (min-width: 600px) { div { gap: var(--gap); } }

D :root { --gap: 1rem; } @media (min-width: 600px) { :root { gap: 2rem; } }

💡 Hint

Variables can be redefined inside media queries on the same selector.

You can redefine CSS variables inside media queries on the :root selector to change values responsively.

❓ accessibility

expert

Why is it important to use CSS variables for color themes in accessible web design?

Which statement best explains the accessibility benefit of using CSS variables for color themes?

A They allow easy switching between color themes to support users with different visual needs.

B They reduce page load time by embedding colors directly in HTML.

C They prevent users from changing colors, ensuring consistent branding.

D They automatically adjust colors to meet contrast standards without extra code.

💡 Hint

Think about how changing variables can help users customize appearance.

CSS variables let developers create multiple themes and switch them easily, helping users with visual impairments choose comfortable colors.