The color and background-color properties

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. Which declaration sets the text colour of a paragraph to navy?

A p { color: navy; }

B p { text-color: navy; }

2. Which declaration changes the colour behind the text?

A background-color: yellow;

B color-background: yellow;

3. Which is a valid hex colour value?

A color: 1a2b3c;

B color: #1a2b3c;

4. Which property would you use to make the words themselves red?

A color: red;

B background-color: red;

5. Which property would you use to fill the area behind a heading with lightgrey?

A color: lightgrey;

B background-color: lightgrey;

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left column		Right column
1color: navy;		Atext-color is not a CSS property. The text colour property is called color, so it should be color: navy;
2background-color: #ffeb3b;		Bp { background-color: #222222; color: white; }
3To make the text of a heading dark blue, use the color property with a colour name.		CSets the colour behind the text to yellow, using a hex value.
4To give a paragraph a dark background with light text that is easy to read, set both properties to colours with strong contrast.		Dh1 { color: navy; }
5p { text-color: navy; }		ESets the text colour of an element to navy, using a colour name.
6body { background-color: #fff; color: #fff; }		FThe text and background are both white, so the text is invisible. Use a text colour with strong contrast, such as color: #000;

Definitions

color: navy;

Fill in the Blanks

Complete each line of code by filling in the missing parts.

p { _____: navy; }

body { ________________: #f0f0f0; }

h2 { color: _ff0000; }

h1 { _____: white; background-color: navy; }

.warning { color: black; ________________: yellow; }

Spot the Error

Shade in the letter of the line that contains an error.

Question 1

A p (

B color: navy;

C background-color: #ffffff;

D }

Question 2

A h1 {

B background-color: navy;

C colour: white;

D }

Question 3

A body {

B color: #222222;

C background-color: f0f0f0;

D }

Question 4

A h2 {

B color= darkgreen;

C background-color: #ffffff;

D }

Question 5

A <p style="color: navy;>

B Read this notice.

C </p>

Answer Key

The color and background-color properties

Section A: Quick Questions

A — p { color: navy; }

A — background-color: yellow;

B — color: #1a2b3c;

A — color: red;

B — background-color: lightgrey;

Section B: Match the Pairs

color: navy; → Sets the text colour of an element to navy, using a colour name.

background-color: #ffeb3b; → Sets the colour behind the text to yellow, using a hex value.

To make the text of a heading dark blue, use the color property with a colour name. → h1 { color: navy; }

To give a paragraph a dark background with light text that is easy to read, set both properties to colours with strong contrast. → p { background-color: #222222; color: white; }

p { text-color: navy; } → text-color is not a CSS property. The text colour property is called color, so it should be color: navy;

body { background-color: #fff; color: #fff; } → The text and background are both white, so the text is invisible. Use a text colour with strong contrast, such as color: #000;

Section C: Definitions

color: navy; — The color property sets an element's text colour using a name or hex value. background-color sets the colour behind the text. Choose pairs with enough contrast to read.

Section D: Fill in the Blanks

p { color: navy; }

body { background-color: #f0f0f0; }

h2 { color: #ff0000; }

h1 {
  color: white;
  background-color: navy;
}

.warning {
  color: black;
  background-color: yellow;
}

Section E: Spot the Error

A — A CSS rule must open its declaration block with a curly brace {, not a round bracket. It should be p {.

C — CSS uses the American spelling color. The property colour does not exist, so the white text is ignored. It should be color: white;.

C — A hex colour value must start with #. Without it the browser ignores the value. It should be background-color: #f0f0f0;.

B — A CSS declaration uses a colon between the property and the value, not an equals sign. It should be color: darkgreen;.

A — The style attribute value is missing its closing double quote. It should be <p style="color: navy;">.