Variable scope in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a CSS variable inside the :root selector.

CSS

:root {
  --main-color: [1];
}

Drag options to blanks, or click blank then click option'

Amain-color

B#3498db

Ccolor

Dvar(--main-color)

Attempts:

3 left

💡 Hint

Common Mistakes

Using the variable name as the value instead of a color.

Forgetting the '#' in the color code.

Using var(--main-color) when defining the variable.

The correct way to define a CSS variable is to assign a value like a color code. Here, #3498db is a valid color value.

2fill in blank

medium

Complete the code to use the CSS variable --main-color inside the body selector.

CSS

body {
  background-color: [1];
}

Drag options to blanks, or click blank then click option'

Avar(--main-color)

Bcolor(--main-color)

Cmain-color

D--main-color

Attempts:

3 left

💡 Hint

Common Mistakes

Using the variable name without var().

Using incorrect syntax like color(--main-color).

Forgetting the double dashes in the variable name.

To use a CSS variable, you must wrap its name with var(). So var(--main-color) correctly accesses the variable.

3fill in blank

hard

Fix the error in the code to correctly override the CSS variable --main-color inside the .button class.

CSS

.button {
  [1]: #e74c3c;
}

Drag options to blanks, or click blank then click option'

A--main-color

Bmain-color

Cvar(--main-color)

Dcolor

Attempts:

3 left

💡 Hint

Common Mistakes

Using var(--main-color) as a property name.

Using the variable name without dashes.

Using unrelated property names like color.

To override a CSS variable, you must use its full name with double dashes, like --main-color, not just the name or var().

4fill in blank

hard

Fill both blanks to define a CSS variable --text-size inside :root and use it in the p selector.

CSS

:root {
  [1]: 1.2rem;
}
p {
  font-size: [2];
}

Drag options to blanks, or click blank then click option'

A--text-size

Bvar(--text-size)

C--main-color

D1.2rem

Attempts:

3 left

💡 Hint

Common Mistakes

Using the variable name without dashes when defining.

Using the variable name without var() when using it.

Mixing variable names like --main-color instead of --text-size.

Define the variable with its name starting with double dashes, then use it with var() where needed.

5fill in blank

hard

Fill all three blanks to define a CSS variable --padding inside :root, override it inside .container, and use it in the div selector.

CSS

:root {
  [1]: 1rem;
}
.container {
  [2]: 2rem;
}
div {
  padding: [3];
}

Drag options to blanks, or click blank then click option'

A--padding

Bvar(--padding)

Dpadding

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names in different places.

Using var() when defining or overriding variables.

Using property names like padding instead of variable names when defining.

Define the variable with --padding in :root, override it with the same name in .container, and use it with var(--padding) in div.