Lessons · HTML and CSS · colour and background

Colour and background

color is the text, background-color is the box behind it, and a border needs a width, a style and a colour before it shows. Hex, rgb and names all mean the same colours.

Hone is a place to practise programming. This is one of its lessons, written out in full and free to read without an account.

What it is for

Contrast between text and background is what makes a page readable, and it is the first thing accessibility checks measure.

How to think about it

Set color and background together, always as a pair, so neither is left to the browser's default against the other. Check that light text sits on a dark box or dark on light.

Worked example

<p class="warn">Careful</p>

Something to colour.

.warn { color: rgb(255, 255, 255); background-color: rgb(180, 0, 0); }

White text on a deep red box: the two set together.

.warn { border: 2px solid rgb(255, 200, 0); }

A border is width, style and colour. Without a style, no border appears at all.

body { background: #0b0d10; color: #e6e6e6; }

Hex is the same colours in shorthand. Set both on the body and every paragraph inherits the text colour.

Your turn

Give the box a pale background.

.box { : #f4f4f4; }

The trap

Setting a dark background without a text colour. The text keeps its default black and disappears into the box.

Practise colour and background on HoneA question on it now, a coding challenge where there is one, and it is remembered for review. Free, no email needed.