Colours and backgrounds

Colours

• You can name a colour: red, blue, green, tomato, gold, and many more.
• Or use a hex code like #2a7ae2 — a # followed by six letters/numbers.
• Names are easy to remember; hex codes give you millions of exact colours.

Backgrounds

• color changes the text colour.
• background-color changes the colour behind an element.
• Put background-color on body to colour the whole page.

<style>
  body { background-color: #f3f4f6; }
  h1   { color: tomato; }
</style>
<h1>Hello!</h1>
<p>A page with a soft grey background.</p>

Common mistakes

• color sets the text; background-color sets the background.
• A colour is a name, a #rrggbb code, or rgb(...).

Now you try

• color is the text; background-color is behind it.
• Colour the page background, then use a hex colour on the heading.