Theory

Colours and fonts

Why you need this

Colour and font are the first things a person notices on a site. They identify a brand (YouTube red, Spotify green) and decide whether text is easy to read. Good typography (the styling of text) is invisible: reading is just pleasant. Bad typography tires you in a minute.

How to write a colour

The same colour can be written in different ways:

h1 { color: red; }                 /* by name: red, blue, gold, tomato… (about 140 names) */
h1 { color: #ff0000; }             /* HEX: a hexadecimal code */
h1 { color: #f00; }                /* short HEX: each digit is doubled */
h1 { color: rgb(255, 0, 0); }      /* RGB: red, green, blue from 0 to 255 */
h1 { color: rgba(255, 0, 0, 0.5); } /* RGB + opacity from 0 to 1 */
h1 { color: hsl(0, 100%, 50%); }   /* HSL: hue, saturation, lightness */

Result: all six lines give red; the fifth one is translucent red.

How to read HEX. #RRGGBB is three pairs of digits: how much red, green and blue light. The digits are hexadecimal: 0…9, then a…f (f = 15). 00 is zero, ff is the maximum (255).

HEX	Colour
`#000000`	black (everything off)
`#ffffff`	white (everything at maximum)
`#ff0000`	red
`#00ff00`	green
`#0000ff`	blue
`#808080`	grey (everything equal, at half)

A colour code usually comes from the design or from the "eyedropper" in a graphics editor.

Background

body { background-color: #f5f5f5; }
.hero { background: linear-gradient(to right, purple, orange); }

Result: a light grey page; a .hero block with a smooth transition from purple to orange.

background is a "shorthand" property: it can hold a colour, a gradient or a picture (background: url(bg.jpg);).

Opacity

The fourth number in rgba is the alpha channel: 1 is opaque, 0 is fully transparent.

.overlay { background: rgba(0, 0, 0, 0.5); }

Result: a translucent dark overlay — you can see what lies below through it.

There is also the opacity: 0.5; property — but it makes the whole element transparent together with its text, while rgba affects only the colour where it is set.

Fonts

body {
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;   /* 400 — normal, 700 — bold */
  font-style: italic; /* italic */
  line-height: 1.5;   /* line height */
}

font-family — a list of fonts separated by commas. The browser takes the first one installed on the computer. The last one is a family: serif, sans-serif, monospace. A name of several words goes in quotes.
font-weight — the weight as a number from 100 to 900 or the word bold.
line-height: 1.5 — the distance between lines is 1.5 times the font size. For body text, 1.4–1.7 is comfortable.

Styling text

h2 {
  text-align: center;          /* left, right, center, justify */
  text-transform: uppercase;   /* ALL CAPS; lowercase; capitalize */
  letter-spacing: 2px;         /* space between letters */
  text-decoration: underline;  /* underline, line-through, none */
}

Result: a centred heading in capitals, with letters spaced slightly apart and underlined.

text-decoration: none is often set on links to remove the underline, and on hover (a:hover) it is brought back.

How it works inside

A screen is made of pixels, and each pixel is three lamps: red, green and blue. The browser turns any colour format into three numbers 0–255. That's why the developer tools (and the task checks) show #ff0000 as rgb(255, 0, 0).

As for fonts: if a font from the list isn't on the computer, the browser silently takes the next one. That's why the list always ends with a generic family — something similar will always be found.

Common mistakes

HEX without the hash. color: ff0000; doesn't work. You need #ff0000.
No fallback font. font-family: "Roboto"; — those without Roboto get the default font. Add , sans-serif.
Light grey text on white. Pretty, but impossible to read. Text must contrast strongly with the background.
line-height: 16px instead of a number. With pixels the spacing doesn't grow with the font. Write a unitless number: 1.5.
opacity instead of rgba. You wanted a translucent background — and the text became transparent too.

Cheat sheet

Property / notation	What it does
`red`, `#ff0000`, `#f00`, `rgb(255,0,0)`	the same red
`rgba(0,0,0,0.5)`	a colour with opacity
`background`	background: colour, gradient, picture
`opacity`	opacity of the whole element
`font-family: …, sans-serif`	a font with fallbacks
`font-size`, `font-weight`, `font-style`	size, weight, italic
`line-height: 1.5`	line height
`text-align`, `text-transform`	alignment, letter case
`letter-spacing`, `text-decoration`	letter spacing, underline