Why CSS variables are used - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a CSS variable for the main color.

CSS

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

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

A#123456

Bblue

Cred

Dgreen

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting the two dashes before the variable name.

Using invalid color values.

CSS variables are declared with -- prefix and assigned a value like a color code.

2fill in blank

medium

Complete the code to use the CSS variable --main-color for text color.

CSS

p { color: var([1]); }

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

Amain-color

Bcolor-main

Cvar(--main-color)

D--main-color

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the dashes in the variable name.

Putting var() inside the blank instead of just the variable name.

To use a CSS variable, wrap its name with var() and include the two dashes.

3fill in blank

hard

Fix the error in the code to correctly use a CSS variable for background color.

CSS

div { background-color: var([1]); }

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

AmainColor

B--bg-color

Cbg-color

Dbackground-color

Attempts:

3 left

💡 Hint

Common Mistakes

Using variable names without dashes.

Using property names instead of variable names.

The variable name must include the two dashes and match the declared variable exactly.

4fill in blank

hard

Fill both blanks to create a CSS variable and use it for border color.

CSS

:root { [1]: #ff6600; } 
.box { border: 2px solid var([2]); }

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

A--border-color

Bborder-color

C--main-border

Dmain-border

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for declaration and usage.

Omitting the dashes in either place.

Declare the variable with two dashes and use the exact same name inside var().

5fill in blank

hard

Fill all three blanks to declare CSS variables and use them for background and text colors.

CSS

:root { [1]: #222222; [2]: #ffffff; } 
.header { background-color: var([3]); color: var(--text-color); }

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

A--bg-color

B--text-color

D--background

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing variable names or forgetting dashes.

Using different names in declaration and usage.

Declare variables with two dashes and use the exact names inside var(). The background uses --bg-color and text uses --text-color.