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.

Practice

1. What is the main purpose of CSS variables?

easy

A. To store reusable values like colors and sizes

B. To create new HTML elements

C. To write JavaScript code inside CSS

D. To add comments in CSS files

Solution

1. Step 1: Understand what CSS variables do

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

2. Step 2: Compare options with this purpose

   Only To store reusable values like colors and sizes describes storing reusable values; others describe unrelated tasks.

3. Final Answer:

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

4. Quick Check:

   CSS variables = reusable values [OK]

Hint: CSS variables store values you reuse often [OK]

Common Mistakes:

• Thinking CSS variables create HTML elements
• Confusing CSS variables with JavaScript
• Believing CSS variables add comments

2. Which is the correct way to define a CSS variable for a primary color globally?

easy

A. :root { --primary-color: #3498db; }

B. body { primary-color: #3498db; }

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

D. html { --primary-color #3498db; }

Solution

1. Step 1: Recall CSS variable syntax

   Variables are defined with two dashes and a colon inside a selector, usually :root for global scope.

2. Step 2: Check each option's syntax

   :root { --primary-color: #3498db; } uses correct syntax: :root { --name: value; }. Others have missing dashes, wrong selectors, or wrong assignment.

3. Final Answer:

   :root { --primary-color: #3498db; } -> Option A

4. Quick Check:

   Define variables with --name: value; inside :root [OK]

Hint: Use :root and --var-name: value; to define variables [OK]

Common Mistakes:

• Missing double dashes before variable name
• Using = instead of : for assignment
• Defining variables outside :root for global use

3. Given the CSS below, what color will the paragraph text be?

:root { --main-color: #ff0000; } p { color: var(--main-color); }

medium

A. Blue

B. Green

C. Black

D. Red

Solution

1. Step 1: Identify the variable value

   The variable --main-color is set to #ff0000, which is red.

2. Step 2: Check how the variable is used

   The paragraph's color is set using var(--main-color), so it uses the red color.

3. Final Answer:

   Red -> Option D

4. Quick Check:

   var(--main-color) = #ff0000 (red) [OK]

Hint: Match variable value hex to color name [OK]

Common Mistakes:

• Ignoring the variable and using default color
• Confusing hex codes with other colors
• Not using var() to apply variable

4. What is wrong with this CSS code?

:root { --font-size 16px; } h1 { font-size: var(--font-size); }

medium

A. Variable name should not start with dashes

B. Missing colon after --font-size in variable definition

C. Using var() incorrectly in h1 font-size

D. font-size property cannot use variables

Solution

1. Step 1: Check variable definition syntax

   The variable definition is missing a colon after --font-size; it should be --font-size: 16px;

2. Step 2: Verify usage of var()

   The usage var(--font-size) is correct in h1 font-size property.

3. Final Answer:

   Missing colon after --font-size in variable definition -> Option B

4. Quick Check:

   Variable definitions need colon after name [OK]

Hint: Variable definitions need colon after name [OK]

Common Mistakes:

• Forgetting colon in variable definition
• Thinking var() usage is wrong
• Believing variable names can't start with --

5. You want to create a theme with two colors using CSS variables: primary as blue (#0000ff) and secondary as gray (#888888). How do you apply these variables to style a button's background and border color?

hard

A. :root { --primary: blue; --secondary: gray; } button { background-color: --primary; border: 2px solid --secondary; }

B. :root { primary: #0000ff; secondary: #888888; } button { background-color: primary; border: 2px solid secondary; }

C. :root { --primary: #0000ff; --secondary: #888888; } button { background-color: var(--primary); border: 2px solid var(--secondary); }

D. button { --primary: #0000ff; --secondary: #888888; background-color: var(primary); border: 2px solid var(secondary); }

Solution

1. Step 1: Define variables globally with correct syntax

   Variables must be defined inside :root with double dashes and colon, e.g., --primary: #0000ff;

2. Step 2: Use variables with var() in button styles

   Apply variables using var(--primary) for background and var(--secondary) for border color.

3. Final Answer:

   :root { --primary: #0000ff; --secondary: #888888; } button { background-color: var(--primary); border: 2px solid var(--secondary); } -> Option C

4. Quick Check:

   Define with --name: value; use with var(--name) [OK]

Hint: Define variables in :root and use var(--name) to apply [OK]

Common Mistakes:

• Omitting -- in variable names
• Not using var() when applying variables
• Defining variables inside button instead of :root