← 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. Common values are normal, bold, or numbers from 100 to 900 in multiples of 100 (400 = normal, 700 = bold). Modern variable fonts may support any numeric value from 1 to 1000.
font-style
Controls whether text is upright or slanted. Commonly used values include normal, italic, and oblique.
text-decoration
Controls decorations on text: underline, none (removes underline). Browsers usually underline hyperlinks — <a> elements with an href attribute — 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-styleUpright or slanted text; common values include normal, italic, and obliquefont-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;
}

Sizing and text alignment

CSS can set an element's dimensions and align its inline content. These properties do not necessarily give an element a fixed size or position it on the page:

PropertyWhat it does
widthSpecifies the element's width; values can be fixed, fluid (such as a percentage), or auto
heightSpecifies the element's height; values can be fixed, relative, or auto
max-widthSets the maximum width — the element can be narrower but not wider
text-alignAligns inline content, such as text, within the element's box; it does not position the element itself

Worked examples

Example 1 — Reading a hex colour

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

1
Red channel: 0 — no red. Green channel: 128 — medium green. Blue channel: 255 — maximum blue.
2
Decimal 0 = hexadecimal 00. Decimal 128 = hexadecimal 80. Decimal 255 = hexadecimal FF.
3
Hex code: #0080FF — a medium-to-bright blue with a medium green channel at about half intensity, giving it a 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 centred white text, footer same as header, and a responsive main area that is 90% wide but no wider than 60rem.

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 padding and use text-align: center to align the inline text inside the header and footer boxes.
4
Give main a fluid width of 90% and a max-width of 60rem, so it can shrink on smaller screens without becoming too wide on larger ones.
body {
  background-color: #f8f8fc;
}

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

footer {
  background-color: #185FA5;
  color: #ffffff;
  padding: 1rem;
  text-align: center;
}

main {
  width: 90%;
  max-width: 60rem;
}
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. Commonly used font-style values include normal, italic, and oblique. Bold text is controlled by font-weight.
✕
Forgetting text-decoration: none on links in navbars. Browsers generally underline hyperlinks — <a> elements with an href attribute — by default; an <a> without href is not a hyperlink and is not generally underlined. To create a clean navigation bar, set text-decoration: none on its hyperlinks.
Exam tip

You should be able to recognise valid CSS colour syntax. Given a hex code like #42A5F5, you should also 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.

Know at least two ways to specify a colour in CSS (named, hex, or RGB) and be able to give a valid example of 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. Also style main with a responsive width of 90%, a maximum width of 60rem, and centred text. (5 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;
}

main {
  width: 90%;
  max-width: 60rem;
  text-align: center;
}
1 mark per selector (correct properties with clear hierarchy — h1 larger/darker than h2, h2 larger/more prominent than p — plus the required responsive width, maximum width, and text alignment on main). Accept any reasonable typography 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 reinforces how to interpret the RRGGBB structure by reasoning about channel dominance without doing exact conversions. Emphasise recognising valid hex syntax and explaining which colour channel is strongest.