Declaring variables in CSS - Interactive Code Practice

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'

Ablue

B#3498db

Cred

Dgreen

Attempts:

3 left

💡 Hint

Common Mistakes

Using a color name when a hex code is expected.

Forgetting the two dashes before the variable name.

The correct way to declare a CSS variable is to use a valid color value. Here, #3498db is a hex color code for a blue shade.

2fill in blank

medium

Complete the code to use the CSS variable for background color.

CSS

body { background-color: [1](--main-color); }

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

Aget

Buse

Cvar

Dcolor

Attempts:

3 left

💡 Hint

Common Mistakes

Using the variable name without var().

Using incorrect function names like use() or get().

To use a CSS variable, you write var(--variable-name). Here, var(--main-color) applies the variable value.

3fill in blank

hard

Fix the error in the CSS variable declaration.

CSS

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

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

Avar

B-

C_

D--

Attempts:

3 left

💡 Hint

Common Mistakes

Using only one dash or underscore instead of two dashes.

Trying to use var in the declaration.

CSS variables must start with two dashes --. Here, adding -- before main-color fixes the declaration.

4fill in blank

hard

Fill both blanks to declare and use a CSS variable for font size.

CSS

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

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

A--

Bvar

Cfont

Dsize

Attempts:

3 left

💡 Hint

Common Mistakes

Missing dashes in declaration.

Not using var() when applying the variable.

Declare the variable with two dashes --font-size and use it with var(--font-size).

5fill in blank

hard

Fill all three blanks to declare and use CSS variables for color and padding.

CSS

:root { [1]primary-color: #2ecc71; [2]padding: 1rem; } div { color: [3](--primary-color); padding: var(--padding); }

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

A--

Bvar

Dpadding

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting dashes in variable names.

Using variable names without var() when applying.

Declare variables with two dashes --primary-color and --padding. Use var(--primary-color) to apply the color.