Using 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'

Acolor

Bblue

Cmain-color

D#3498db

Attempts:

3 left

💡 Hint

Common Mistakes

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

Forgetting the colon after the variable name.

The correct way to declare a CSS variable is to use a valid color value like a hex code.

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'

Acolor

Bvar

Cget

Duse

Attempts:

3 left

💡 Hint

Common Mistakes

Writing the variable name without var().

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

To use a CSS variable, you write var(--variable-name).

3fill in blank

hard

Fix the error in the CSS variable usage for text color.

CSS

p { color: [1](--text-color); }

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

Avar

Btext

Ccolor

Duse

Attempts:

3 left

💡 Hint

Common Mistakes

Using the variable name directly without var().

Using incorrect function names.

The correct function to use a CSS variable is var().

4fill in blank

hard

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

CSS

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

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

A--main

Bfont

Cvar

Dsize

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting the dashes in the variable name.

Not using var() to access the variable.

CSS variables are declared with names starting with -- and used with var().

5fill in blank

hard

Fill all three blanks to declare variables and use them for margin and padding.

CSS

:root { [1]-margin: 1rem; [2]-padding: 2rem; } div { margin: [3](--main-margin); padding: var(--secondary-padding); }

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

A--main

Cvar

D--secondary

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same variable name for different properties.

Not using var() to access variables.

Declare variables with --name and use var() to access them. Different variables can be declared for margin and padding.