Skip to content
WANCODE
BM

Colours, Fonts & Spacing

15 minBeginnerHTML · CSS · JS

In this lesson

  • Write colours as names, hex codes, rgb() and hsl()
  • Set a font stack with a generic fallback, plus a comfortable size and line height
  • Use padding for space inside an element and margin for space outside it

The big idea

Most of what makes a page feel "designed" is three things done well: a few colours with good contrast, a readable font, and generous spacing.

Four ways to write a colour

CSS
h1 { color: tomato; }                 /* named colour */
h1 { color: #ff6347; }                /* hex: red, green, blue as 00–ff */
h1 { color: rgb(255, 99, 71); }       /* rgb: each channel 0–255 */
h1 { color: hsl(9, 100%, 64%); }      /* hsl: hue, saturation, lightness */

All four lines produce the same colour.

Named
About 140 built-in names like white, navy, tomato. Great for quick tests; limited choice.
Hex
#RRGGBB: two hexadecimal digits each for red, green and blue. #000000 is black, #ffffff is white. Short form: #f63 means #ff6633. This is what design tools usually give you.
rgb()
The same red, green, blue idea in decimal (0–255). Add a fourth value for transparency: rgb(0, 0, 0, 0.5) is half-transparent black.
hsl()
Hue (0–360 around the colour wheel: 0 red, 120 green, 240 blue), saturation (0% grey to 100% vivid), lightness (0% black to 100% white). Easiest for making lighter or darker versions of one colour.

color sets the text colour. background-color sets the fill behind an element. You'll often set both, and they must contrast well.

Contrast is not optional

Light grey text on white looks stylish and is painful to read, especially on a phone in the sun. The WCAG accessibility guidelines recommend a contrast ratio of at least 4.5:1 for normal text. Browser DevTools show the ratio when you inspect a colour.

Fonts

CSS
body {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;      /* usually 16px */
  line-height: 1.6;     /* 1.6 × the font size */
}

h1 {
  font-size: 2.5rem;    /* 2.5 × the root size, usually 40px */
  font-weight: bold;
}
  • font-family is a stack: the browser uses the first font that's installed. Always end with a generic family (serif, sans-serif, monospace or system-ui) as the safety net.
  • Font names with spaces need quotes: "Times New Roman". Generic names never have quotes.
  • rem is relative to the page's root font size (16px unless the user changed it). Using rem respects people who set a bigger default text size in their browser.
  • line-height without a unit (like 1.6) scales with the text. Around 1.5–1.7 is comfortable for paragraphs; headings can be tighter.

Spacing: padding vs margin

Padding is space inside an element, between its content and its border. The background colour fills it. Margin is space outside the border, pushing other elements away. It's always transparent.

CSS
.card {
  padding: 24px;          /* all four sides */
  margin: 40px auto;      /* 40px top & bottom, auto left & right = centred */
}

.tag {
  padding: 4px 12px;      /* 4px top & bottom, 12px left & right */
}

Shorthand reads clockwise from the top: one value = all sides; two values = top/bottom then left/right; four values = top, right, bottom, left. You'll see exactly how padding, border and margin stack up in the next lesson, the box model.

In style.css:

1. Give the body a soft background-color (not white), e.g. hsl(150, 40%, 88%).

2. Give .card a white background so the text stays easy to read.

3. Give the h1 a text color, e.g. #1f6f43.

Use at least two different colour formats across your rules (for example hsl for the body, a name for the card, hex for the heading).

Checks

  • The page has a background colour
  • The card has its own light background
  • The heading has a colour
  • At least two colour formats are used

Check understanding

Q1

Which of these is NOT the same colour as the others?

Q2

Why end a font stack with a generic family like sans-serif?

Q3

You want more space between a button's text and its edge, inside its background. Which property?

What you learned

  • Colours can be named, hex (#1f6f43), rgb() or hsl(); color is text, background-color is the fill. Keep contrast high.
  • A font stack lists fonts in order of preference and ends with a generic family.
  • Use rem for sizes and a unitless line-height around 1.5–1.7 for body text.
  • Padding is space inside the border; margin is space outside it.
Preview

Console output from your code appears here.

Step 1 of 3