← Course home N5 Computing Science  ·  James Gillespie's
WDD  ·  Web Design & Development

CSS: Typography, Colour and Layout

Lesson 7 of 13 Approx 1 hr (single period)

Learning intentions

  • Know and use key typography properties: font-family, font-size, font-weight, font-style, line-height, text-decoration
  • Know and use colour properties: color and background-color
  • Understand three ways to specify a colour in CSS: named, hexadecimal, and RGB
  • Understand what a hex colour code means: #RRGGBB
  • Know basic layout properties: width, height, max-width, text-align

Success criteria

  • I can write CSS to control font, size, weight, style, and line spacing of text
  • I can read a hex colour code and describe its approximate colour
  • I can write colour values using named colours, hex codes, and RGB notation
  • I can apply typography properties to create a clear visual hierarchy (h1, h2, p)
Warm up — what do you already know?

Answer before the lesson begins.

1. Which CSS property makes text appear bold?

2. What colour does the hex code #FF0000 represent?

3. Which CSS property removes the underline from a link?

Key vocabulary

font-family
The CSS property that sets the typeface. E.g. font-family: sans-serif or font-family: 'Arial', sans-serif.
font-size
The CSS property that controls how large the text appears. Common units: px (pixels) and rem (relative to the root font size).
font-weight
Controls text thickness. Values: normal, bold, or numeric (100–900, where 400 = normal, 700 = bold).
font-style
Controls whether text is italic. Values: normal or italic.
text-decoration
Controls decorations on text: underline, none (removes underline). Browsers add underlines to links by default.
hex colour
A 6-digit hexadecimal colour code in the format #RRGGBB. Each pair (00–FF) controls the red, green, and blue channel. E.g. #FF0000 = red.
RGB colour
Colour specified using three numbers (0–255) for red, green, blue. E.g. rgb(255, 0, 0) = red.
text-align
Controls horizontal alignment of text within an element. Values: left, center, right, justify.

CSS: Typography, Colour and Layout

Typography properties

Typography refers to how text is presented — typeface, size, weight, and spacing. Good typography makes a page easier to read and more visually appealing. CSS provides a set of properties specifically for text:

PropertyWhat it controlsExample
font-familyThe typeface usedfont-family: sans-serif;
font-sizeThe text sizefont-size: 1.5rem;
font-weightBoldness of the textfont-weight: bold;
font-styleNormal or italicfont-style: italic;
line-heightVertical space between lines of textline-height: 1.7;
letter-spacingHorizontal space between lettersletter-spacing: 0.05em;
text-decorationUnderline, none, etc.text-decoration: none;
text-alignHorizontal alignmenttext-align: center;
 
p {
  font-family: sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: #4a4a6a;
}

Colour in CSS

Two main colour properties exist in CSS:

  • color — sets the text colour
  • background-color — sets the background fill of the element

There are three main ways to write a colour value:

FormatSyntaxExample
Named colourA colour keywordcolor: red;
Hexadecimal#RRGGBBcolor: #FF0000;
RGBrgb(r, g, b)color: rgb(255, 0, 0);

Understanding hex colour codes

A hex colour code follows the format #RRGGBB — six hexadecimal digits split into three pairs:

  • RR — the amount of red (00 = none, FF = maximum)
  • GG — the amount of green (00 = none, FF = maximum)
  • BB — the amount of blue (00 = none, FF = maximum)

Each pair is a hexadecimal number from 00 to FF, equivalent to 0–255 in decimal.

#FF0000 — red
#00FF00 — lime
#0000FF — blue
#000000 — black
#FFFFFF — white
#185FA5 — dark blue

Memory aid: Think of mixing red, green, and blue light (like screen pixels). FF = full brightness, 00 = no brightness. #FFFFFF mixes all three at full brightness = white. #000000 has none of any colour = black.

# FF 88 00 = #FF8800 Red = 255 (max) Green = 136 Blue = 0 (none) Result: orange Common examples: #000000 Black #FFFFFF White #FF0000 Red #185FA5 WDD Blue

Each pair of hex digits controls one colour channel — 00 is none, FF is maximum

Creating a typographic hierarchy

A well-designed page has a clear visual hierarchy — headings look different from subheadings, which look different from body text. CSS lets you define this consistently:

h1 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #042C53;
}

h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #185FA5;
}

p {
  font-size: 1rem;
  line-height: 1.7;
  color: #4a4a6a;
}

Layout basics

Several CSS properties control the size and position of elements on the page:

PropertyWhat it does
widthSets a fixed width for the element
heightSets a fixed height for the element
max-widthSets the maximum width — the element can be narrower but not wider
text-alignAligns the text within the element: left, center, right, justify

Worked examples

Example 1 — Reading a hex colour

What colour is rgb(0, 128, 255)? Convert it to its approximate hex equivalent.

1
Red channel: 0 — no red. Green channel: 128 — medium green. Blue channel: 255 — maximum blue.
2
0 in hex = 00. 128 in hex ≈ 80. 255 in hex = FF.
3
Approximate hex code: #0080FF — a medium-to-bright blue with a small amount of green, giving it a slightly cyan tint.
/* RGB and hex are equivalent */
p { color: rgb(0, 128, 255); }
p { color: #0080FF; }  /* same colour */
Example 2 — Typographic hierarchy

Write CSS to create a consistent typographic hierarchy for a page: h1 with font-size 2.5rem, font-weight 700, colour #042C53; h2 with font-size 1.5rem, font-weight 600; paragraphs with font-size 1rem, line-height 1.7, colour #4a4a6a.

1
Write separate rules for h1, h2, and p — each with its own selector and declaration block.
2
Use decreasing font-size values to establish the hierarchy visually.
3
Use a lighter colour for body text (p) than for headings to aid readability.
h1 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #042C53;
}

h2 {
  font-size: 1.5rem;
  font-weight: 600;
}

p {
  font-size: 1rem;
  line-height: 1.7;
  color: #4a4a6a;
}
Example 3 — Consistent colour scheme

Style a page with a consistent colour scheme: body background #f8f8fc, header background #185FA5 with white text, footer same as header.

1
Set the body's background-color for the overall page background.
2
For the header and footer, set background-color to the brand blue and color to white for contrast.
3
Add some padding to both so the text has breathing room.
body {
  background-color: #f8f8fc;
}

header {
  background-color: #185FA5;
  color: #ffffff;
  padding: 1rem;
}

footer {
  background-color: #185FA5;
  color: #ffffff;
  padding: 1rem;
}
Now you try

Write CSS rules that:

  • Set the body to use sans-serif as its font-family
  • Give h1 a colour of #042C53 (as a hex code) and make it bold using font-weight
  • Make all em elements italic using font-style
  • Remove the underline from all a elements using text-decoration
body {
  font-family: sans-serif;
}

h1 {
  color: #042C53;
  font-weight: bold;
}

em {
  font-style: italic;
}

a {
  text-decoration: none;
}
Common mistakes
✕
Confusing color (text) with background-color (fill). Setting color: white on a dark header makes the text white — it does not fill the background. Always use background-color for the fill behind an element.
✕
Writing hex codes with only 3 digits. #FFF is valid CSS shorthand for #FFFFFF, but #FA5 is not the same as #FA0050 — it expands to #FFAA55. When working from specific hex codes, always use the full 6-digit form.
✕
Using font-style: bold instead of font-weight: bold. font-style only accepts normal or italic. Bold text is controlled by font-weight.
✕
Forgetting text-decoration: none on links in navbars. Browsers add underlines to all <a> elements by default. To create a clean navigation bar, you must explicitly set text-decoration: none on the links.
Exam tip

Hex colour questions are reliable marks at N5. Given a hex code like #42A5F5, you should be able to reason about the colour: the red channel is 42 (low), the green channel is A5 (medium), the blue channel is F5 (high) — so this is a light-to-medium blue. You do not need to calculate exact decimal values — just reason about which channel is highest and give a rough colour description.

The question "describe two ways to specify a colour in CSS" is commonly worth 2 marks. Know at least two formats (named, hex, RGB) with one example each.

Task Set

Questions 1–3 are auto-checked. Questions 4–8 are self-marked — write your answer, then reveal the model answer to check your work.

1. What does the CSS property line-height control? TYPE 1

2. Which CSS value makes text appear in italics? TYPE 1

3. What does the hex colour #FFFFFF represent? TYPE 1

4. Given the hex code #42A5F5: describe approximately what colour it is and explain your reasoning using the RRGGBB structure. (2 marks) TYPE 2

Colour: a medium-to-light blue

Reasoning: The code is #42A5F5.
RR = 42 — low red value (42 out of FF = about 26% red)
GG = A5 — medium green value (about 65%)
BB = F5 — high blue value (about 96%)

The blue channel is dominant and very high, green is moderate, and red is low. This gives a bright, somewhat light blue — similar to a clear sky colour.

1 mark for identifying it as a shade of blue; 1 mark for correctly explaining which channel is dominant using the RRGGBB structure.

5. Write a CSS rule for an h2 element with the following properties: font-family sans-serif; font-size 1.4rem; colour #185FA5 (using a hex value); font-weight 600. (2 marks) TYPE 2

h2 {
  font-family: sans-serif;
  font-size: 1.4rem;
  color: #185FA5;
  font-weight: 600;
}
1 mark: correct selector and all four properties present. 1 mark: correct syntax (colon between property:value, semicolons, closing brace).

6. Explain the difference between the color and background-color CSS properties. Give an example of when you would use each. (2 marks) TYPE 2

color sets the colour of the text inside an element.
Example: p { color: #1a1a2e; } — makes paragraph text dark navy.

background-color sets the fill colour behind an element — the area behind the text and padding.
Example: header { background-color: #185FA5; } — gives the header a blue background.

1 mark per property with correct explanation + example.

7. Write CSS rules for body, h1, h2, and p to create a consistent typographic hierarchy for a school club website. Choose appropriate font-sizes, font-weights, and colours that form a clear visual hierarchy. (4 marks) TYPE 2

body {
  font-family: sans-serif;
  background-color: #f8f8fc;
  color: #1a1a2e;
}

h1 {
  font-size: 2rem;
  font-weight: 700;
  color: #042C53;
}

h2 {
  font-size: 1.4rem;
  font-weight: 600;
  color: #185FA5;
}

p {
  font-size: 1rem;
  line-height: 1.7;
  color: #4a4a6a;
}
1 mark per selector (correct properties with clear hierarchy — h1 larger/darker than h2, h2 larger/more prominent than p). Accept any reasonable values that demonstrate a clear visual hierarchy.

8. Describe two ways to specify a colour in CSS. For each way, give one example. (2 marks) TYPE 2

Any two of the following (1 mark each — must include both the method name and a correct example):

1. Named colour — using a CSS colour keyword. Example: color: red;
2. Hexadecimal (hex) — using a 6-digit #RRGGBB code. Example: color: #FF0000;
3. RGB — using rgb(r, g, b) with values 0–255. Example: color: rgb(255, 0, 0);
Teacher notes — Shift+T to hide

Suggested timing: Single 1-hour period. Spend approximately 20 minutes on notes/examples (focus on hex colours — they take the longest to grasp), 10 minutes on now-you-try, 30 minutes on task set (Q1–Q6 in class; Q7–Q8 as extension or start of next lesson).

Hex colour activity: Show a before/after split on the projector — the same HTML page, one with no CSS and one with a consistent colour scheme and typography. Ask which is more readable and why. This motivates the lesson before any explanation.

The hex mixing metaphor: Explain hex as mixing coloured light (not paint). Red + Green + Blue light at full brightness = white. None of any = black. This is the opposite of mixing paint pigments and often surprises pupils.

Q4 is excellent exam preparation — pupils must reason about channel dominance without doing exact conversions. Drilling this type of question now pays off significantly in the exam.