meet it

Colours have names, and a rule can set more than one thing.

CSS knows over a hundred colour names, from red and blue to tomato, skyblue and hotpink. Names never have spaces: it is lightgreen, not light green.

color paints the words. background-color paints the , the area behind them. Dark words on a pale background are the clearest to read.

A property with its value is called a . One rule can hold as many as you like. Put each on its own line and end every one with a semicolon.

<h1>Beach day</h1>
<p>Bring a towel and a bucket.</p>

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

Press show my page to see it here.

Look closely: the background fills the whole width of the heading, not only the space behind the letters.

guess first

Text or background? What changes?

Guess before you run it. Wrong guesses are how you learn, and nothing is marked.

<p>Ice cream for everyone!</p>

p {
  background-color: pink;
}

your turn

Your turn. Make a sign that stands out.

Choose a new colour for the words and a colour for the background. Pick two that are clear together, like white on green.

the page you’re styling

<p>Fire exit this way</p>

your css

Your code

Press show my page to see it here.

the words are a new colournot checked yet
the sign has a background colournot checked yet

fix it

The note has no background. Can you fix it?

the page you’re styling

<p>Lunch is in the fridge.</p>

your css

Broken code to fix

Press show my page to see it here.

the note has a light blue backgroundnot checked yet
the words are navynot checked yet

The words turned navy, so the first declaration works. Look closely at the colour name in the second.
Colour names never have spaces in them.
Change light blue to lightblue, then press run.

nailed it

you painted words and backgrounds. :D

CSS knows over a hundred colour names, with no spaces.
color paints the words. background-color paints behind them.
One rule can hold many declarations, each ending in ;.

new words in your collection

declaration
background

This lesson isn’t saved. A free account remembers every lesson you finish.