20 min read

Colours and Backgrounds

Colour names, hex and rgb values, text and background colours, background images, and a consistent theme using CSS variables.

Writing Colours

Ways to write a colour
Ways to write a colour

Colour Properties

color — the text colour. background-color — the colour behind an element. border-color — the colour of a border (next part of the course). Set the page's main colours on body, so every element inherits them.

What the browser shows

Try it:

Change the header's background to rgb(217, 150, 43) — the gold. Is the cream text still easy to read?

A Consistent Theme with Variables

Typing the same hex codes again and again is slow and error-prone. CSS custom properties (variables) store them once:

Theme colours as variablesCSS

1:root {2  --cream: #FBF6EE;3  --tea-brown: #5A3825;4  --gold: #D9962B;5  --text: #2B1D14;6}7 8body {9  background-color: var(--cream);10  color: var(--text);11}12 13header,14footer {15  background-color: var(--tea-brown);16}

Change --gold once and every button and link that uses it changes too. This keeps the colour scheme from your plan consistent across the whole site.

Background Images

A photo behind a sectionCSS

1.hero {2  background-image: url("../images/teas/tea-plantation.webp");3  background-size: cover;4  background-position: center;5  min-height: 300px;6}

The url() path is relative to the CSS file . style.css is inside the css folder, so it goes up one level (../) to reach images. background-size: cover fills the box without stretching the photo.

Practice

Which property changes the colour behind an element?

More lessons in CSS · Next: Fonts and Text · Previous: Selectors