WDD8 — CSS: External Stylesheets and Cascade

Learning intentions

Understand what an external stylesheet is and how to link one to an HTML page
Know the benefit of using external CSS for multi-page websites
Understand what the cascade is: how the browser decides which CSS rule wins
Know the order of specificity: inline style > ID selector > class selector > element selector
Understand what "separation of concerns" means in web development

Success criteria

I can write the correct <link> element to connect an HTML page to a .css file
I can write the correct relative path to a CSS file from pages in different folders
I can state which CSS rule wins when two rules conflict, using specificity order
I can explain one advantage of using an external stylesheet over an internal one

Key vocabulary

external stylesheet

CSS saved in a separate .css file. Linked to HTML pages using a <link> element. One file can style many pages.

<link> element

An HTML element placed in <head> to connect a page to an external resource such as a CSS file. Self-closing.

rel attribute

Short for "relationship". In a <link> element, rel="stylesheet" tells the browser the linked file is a CSS stylesheet.

href attribute

The path to the linked file — same as in an anchor element. For CSS: href="style.css" or href="../style.css".

cascade

The set of rules the browser uses to decide which CSS rule applies when multiple rules target the same element. Specificity is calculated first; order (last rule wins) is used as a tiebreaker.

specificity

A score that determines which CSS rule wins. Higher score = higher priority. Inline (1000) > ID (100) > class (10) > element (1).

override

When a higher-specificity rule takes priority over a lower one for the same property and element.

separation of concerns

The principle of keeping HTML (structure/content) and CSS (presentation/style) in separate files, making each easier to maintain independently.

CSS: External Stylesheets and Cascade

What is an external stylesheet?

An external stylesheet is a separate file — saved with the .css extension — that contains all the CSS rules for a website. Instead of writing CSS inside every HTML page, you write it once in style.css and link every page to that file. This is the standard approach for real websites.

Benefits of using an external stylesheet:

Change the design in one file and it updates every linked page at once
Separates structure (HTML) from presentation (CSS) — making both easier to read and maintain
The browser can cache the stylesheet, making pages load faster on repeat visits

Linking an external stylesheet

Place a <link> element in the <head> of every HTML page that should use the stylesheet:

<head>
  <meta charset="UTF-8">
  <title>My Page</title>
  <link rel="stylesheet" href="style.css">
</head>

The rel="stylesheet" attribute is required — it tells the browser what kind of resource the link points to. The href is the relative path to the .css file.

Relative paths to CSS files

The path in href is relative to the HTML file, just like image paths in WDD5. If both index.html and style.css are in the same root folder:

<link rel="stylesheet" href="style.css">   <!-- same folder -->

If the HTML file is inside a pages/ subfolder but style.css is in the root:

<link rel="stylesheet" href="../style.css">  <!-- up one level -->

One external CSS file can style every page in the site — change it once, update everywhere

The cascade — how the browser decides which rule wins

CSS stands for Cascading Style Sheets. The cascade is the algorithm the browser uses when multiple CSS rules target the same element with the same property. The rules are:

1. Specificity wins first. Higher-specificity selectors override lower-specificity ones, regardless of order:

Element
score: 1
p { }

Class
score: 10
.text { }

ID
score: 100
#main { }

Inline
score: 1000
style=""

Higher specificity score always wins, regardless of rule order in the file

2. Order is the tiebreaker. When two rules have the same specificity, the one that appears later in the CSS wins:

p { color: blue; }   /* defined first */
p { color: red; }    /* defined later — this wins */

A practical specificity example

/* In style.css */
p { color: blue; }          /* score 1 */
.intro { color: red; }     /* score 10 */
#main-text { color: green; } /* score 100 */

<!-- In HTML -->
<p id="main-text" class="intro" style="color: purple;">
  What colour is this?
</p>

Result: purple — the inline style has the highest specificity (1000) and overrides all stylesheet rules.

Separation of concerns

Separation of concerns is the principle that different types of code should be kept separate. In web development, this means:

HTML handles structure and content — what is on the page
CSS handles presentation — how it looks
JavaScript handles behaviour — how it responds to users (covered in WDD10)

Keeping CSS in an external file supports separation of concerns — the HTML file focuses purely on content, and the CSS file focuses purely on style. This makes both files shorter, cleaner, and easier to update.

Worked examples

Example 1 — The link tag and CSS file

Create a simple two-file setup: an HTML page and a style.css file (both in the same root folder). Show the link tag and how the CSS file connects to it.

Write the <link> element in the HTML page's <head>. The href value must exactly match the filename of the CSS file.

Create style.css in the same folder. Write CSS rules in it as normal — no <style> tags needed in the CSS file.

The browser loads the HTML, finds the <link>, fetches style.css, and applies its rules to the page.

index.html (extract from head):

<head>
  <meta charset="UTF-8">
  <title>My Site</title>
  <link rel="stylesheet" href="style.css">
</head>

style.css:

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

h1 {
  color: #042C53;
}

Example 2 — Specificity in action

Given these three CSS rules for a <p> element, and an inline style — which colour wins?

p { color: blue; }        /* element selector — score 1 */
.intro { color: red; }   /* class selector — score 10 */

<p class="intro" style="color: green;">Hello</p>

Element selector (p) has specificity score 1.

Class selector (.intro) has specificity score 10 — higher than the element rule.

Inline style has specificity score 1000 — highest of all. It wins.

Result: green — the inline style overrides both stylesheet rules.

Example 3 — Two pages sharing one stylesheet

Show a two-page site where both pages link to the same style.css. Explain why this is better than two separate internal style blocks.

root/ ├── style.css ├── index.html └── pages/ └── about.html

index.html head:

<link rel="stylesheet" href="style.css">     <!-- same folder -->

pages/about.html head:

<link rel="stylesheet" href="../style.css">   <!-- up one level -->

Advantage: If you change a colour in style.css, both pages update automatically. With separate internal stylesheets, you would need to make the same change in every single HTML file — one change could easily be missed.

Now you try

You have this folder structure:

root/ ├── style.css ├── index.html └── pages/ └── contact.html

Task A: Write the <link> tag for index.html to use style.css.

Task B: Write the <link> tag for pages/contact.html to use the same style.css (correct relative path required).

Task C: State which rule wins for a <p class="intro"> if: p { color: navy; } and .intro { color: teal; } are both in the stylesheet.

Task A:

<link rel="stylesheet" href="style.css">

Task B:

<link rel="stylesheet" href="../style.css">

Task C: .intro { color: teal; } wins. The class selector (score 10) has higher specificity than the element selector p (score 1).

Common mistakes

Missing rel="stylesheet" in the link element. Writing <link href="style.css"> without rel="stylesheet" means the browser does not know the file is a stylesheet and will not apply it. Both attributes are required.

Wrong relative path to the CSS file from a subfolder. If your HTML page is in pages/ and you write href="style.css", the browser looks for pages/style.css — which does not exist. You need href="../style.css" to go up one level.

Writing CSS rules inside <style> tags in a .css file. An external .css file contains only CSS rules — no HTML tags whatsoever. <style> tags are only used in internal stylesheets inside an HTML file.

Assuming the last rule always wins. Order only matters as a tiebreaker when specificity is equal. A class selector (.intro) written first will still beat an element selector (p) written last, because specificity takes priority over order.

Exam tip

The exam commonly asks: "Write the HTML to link an external stylesheet". The expected answer is: <link rel="stylesheet" href="style.css"> — placed in the <head>. Both the rel and href attributes must be present to get full marks.

For "which rule wins" questions, score each selector: element = 1, class = 10, ID = 100, inline = 1000. The rule with the highest total score wins. If two rules have the same score, the later one in the CSS wins.

For "give one advantage of external stylesheets", a strong answer is: "The CSS is written once but can style multiple pages — if you update the stylesheet, all linked pages update automatically."

Teacher notes — Shift+T to hide

Suggested timing: 2-hour Friday double. Hour 1: warm-up, notes on external stylesheets + the link element, relative paths to CSS (draw folder structure on board). Hour 2: specificity notes + worked examples, now you try, task set. Q9 is the practical consolidation question — ideal for the second hour.

Relative paths to CSS — the biggest confusion point: Draw the folder tree from Example 3 on the board before the task set. Most errors in Q7 come from pupils writing href="style.css" when the HTML is in a subfolder. Reinforce: the path must be relative to where the HTML file is, not the root.

Specificity scoring: Write the four selector types on the board with their scores (1, 10, 100, 1000). Q5 is an excellent exam-style question — pupils must calculate scores and identify the winner. Drill this pattern before the task set.

Q10 (!important): !important is not in the N5 spec as a required topic, but it appears in exam papers. Accept either "it works because !important overrides inline style" OR "remove the inline style from the HTML" as correct approaches.