Color names in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the background color to red using a color name.

CSS

body {
  background-color: [1];
}

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

Ared

B#ff0000

Crgb(255,0,0)

Drgba(255,0,0,1)

Attempts:

3 left

💡 Hint

Common Mistakes

Using hex or rgb values instead of color names.

Misspelling the color name.

The color name red is a valid CSS color keyword that sets the background color to red.

2fill in blank

medium

Complete the code to set the text color to blue using a CSS color name.

CSS

p {
  color: [1];
}

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

Anavy

Bblue

Cskyblue

Dcyan

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing a shade like 'navy' or 'cyan' instead of 'blue'.

Using hex or rgb values instead of color names.

The color name blue sets the text color to a standard blue in CSS.

3fill in blank

hard

Fix the error in the code to correctly set the border color to green using a color name.

CSS

div {
  border: 2px solid [1];
}

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

Agren

Brgb(0,255,0)

Cgreen

D#00ff00

Attempts:

3 left

💡 Hint

Common Mistakes

Misspelling 'green' as 'gren'.

Using hex or rgb values instead of color names.

The correct CSS color name for green is green. The option 'gren' is a typo and invalid.

4fill in blank

hard

Fill both blanks to set the background color to yellow and the text color to black using color names.

CSS

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

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

Ayellow

Bwhite

Cblack

Dgray

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'white' for text color on yellow background which reduces readability.

Choosing colors that do not contrast well.

The background color is set to yellow and the text color to black using CSS color names.

5fill in blank

hard

Fill all three blanks to set the header background to lightblue, text color to darkred, and border color to gray using color names.

CSS

header {
  background-color: [1];
  color: [2];
  border: 1px solid [3];
}

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

Alightblue

Bdarkred

Cgray

Dsilver

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up color names or using colors not in the options.

Using hex or rgb values instead of color names.

The header background uses lightblue, text color is darkred, and border color is gray using CSS color names.