Importance of order in CSS - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the background color to blue.

CSS

body {
  background-color: [1];
}

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

Ablue

Bred

Cgreen

Dyellow

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing a color that is not blue.

Using an invalid color name.

The background-color property sets the background color of the page. Here, we want it to be blue.

2fill in blank

medium

Complete the code to make the text color red.

CSS

p {
  color: [1];
}

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

Ablue

Bred

Cblack

Dgreen

Attempts:

3 left

💡 Hint

Common Mistakes

Using a color that does not match the instruction.

Misspelling the color name.

The color property changes the text color. We want the text to be red.

3fill in blank

hard

Fix the error in the CSS to make the text bold.

CSS

h1 {
  font-weight: [1];
}

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

Abold

Bnormal

Clight

Dthin

Attempts:

3 left

💡 Hint

Common Mistakes

Using values like 'normal' or 'thin' which do not make text bold.

Using invalid values.

The font-weight property controls how thick the text looks. bold makes the text thick and strong.

4fill in blank

hard

Fill both blanks to set the text color to green and background to yellow.

CSS

div {
  color: [1];
  background-color: [2];
}

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

Agreen

Bblue

Cyellow

Dred

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the colors between text and background.

Using colors not mentioned in the instruction.

The color property sets the text color, and background-color sets the background. Here, text is green and background is yellow.

5fill in blank

hard

Fill all three blanks to set font size to 2rem, text color to black, and background to white.

CSS

section {
  font-size: [1];
  color: [2];
  background-color: [3];
}

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

A1rem

Bblack

Cwhite

D2rem

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up font size values.

Swapping text and background colors.

font-size sets the size of the text. 2rem means twice the root font size. color sets text color to black, and background-color sets background to white.