← ACARA Digital Technologies Years 9–10

The color and background-color properties

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.

Part of: ACARA Digital Technologies Years 9–10 — Content, Structure and Presentation — Module 33

Understanding The color and background-color properties in ACARA Digital Technologies Years 9–10

What it does: The color property changes the text colour, so h1 { color: navy; } turns the heading text navy. A dark background paired with white text has high contrast, and each property controls its own part of the element. A hex colour must start with a # symbol. Without it the browser ignores the declaration. Each declaration ends with a semicolon, not a comma. The name navy is the same colour as the hex value #000080. You can use either a name or a hex value. background-color fills the area behind the content, and #ffeb3b is a hex code for a bright yellow.

Common mistakes: A CSS rule must open its declaration block with a curly brace {, not a round bracket. It should be p {. CSS uses the American spelling color. The property colour does not exist, so the white text is ignored. It should be color: white;.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add The color and background-color properties to a class →

This module's key terms are also in a printable crossword (Modules 155–225) and word search (Modules 116–225).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

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

p { text-color: navy; }p { color: navy; }

Matches

p { text-color: navy; }

↓

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

Applying

Meanings

Term

color: navy;

Meaning

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.

Practice

h1 {

Testing

Gaps

p { : navy; }

Check Answer

Spots

1p (

2 color: navy;

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

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

A. p { color: navy; } ✓

B. p { text-color: navy; }

The property for text colour is color. There is no text-color property in CSS.

2. Which declaration changes the colour behind the text?

A. background-color: yellow; ✓

B. color-background: yellow;

The property name is background-color, with background first, then a hyphen, then color.

3. Which is a valid hex colour value?

A. color: 1a2b3c;

B. color: #1a2b3c; ✓

A hex colour must start with a # symbol. Without it the browser ignores the declaration.

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

A. color: red; ✓

B. background-color: red;

color changes the text. background-color changes the area behind the text.

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

A. color: lightgrey;

B. background-color: lightgrey; ✓

background-color sets the colour behind the text. color would only change the lettering.

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;

Key Term

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.

Fill in the Blanks

1. p { color: navy; }

Hint: Type the property that sets the text colour of an element.

2. body { background-color: #f0f0f0; }

Hint: Type the property that sets the colour behind the text.

3. h2 { color: #ff0000; }

Hint: Type the symbol that every hex colour value starts with.

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

Hint: Type the property that makes the text pale against the dark background.

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

Hint: Type the property that sets the colour behind the text so it contrasts with the dark text.

Spot the Error

Question 1

A p (

B color: navy;

C background-color: #ffffff;

D }

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

Question 2

A h1 {

B background-color: navy;

C colour: white;

D }

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

Question 3

A body {

B color: #222222;

C background-color: f0f0f0;

D }

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

Question 4

A h2 {

B color= darkgreen;

C background-color: #ffffff;

D }

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

Question 5

A <p style="color: navy;>

B Read this notice.

C </p>

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

Student with a class code? Join your class →