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
Compare CSS specificity using the tuple columns: inline, IDs, classes, and types
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 importance, specificity tuples, and source 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

A void HTML element placed in <head> to connect a page to an external resource such as a CSS file. Void elements do not have a closing tag.

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 rules the browser uses to decide which declaration applies when several target the same property. In ordinary author CSS, compare !important status, then specificity, then source order.

specificity

Four separate counts: (inline, IDs, classes/attributes/pseudo-classes, types/pseudo-elements). Compare left to right; do not add them into a decimal score.

override

When one CSS declaration takes priority over another declaration 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 several declarations target the same property on the same element. For ordinary author CSS at N5 level, compare them in this sequence:

!important status: an important author declaration beats a normal author declaration.
Specificity: if the declarations have the same importance status, compare their specificity tuples from left to right.
Source order: if specificity is also equal, the declaration that appears later wins.

The browser's full cascade also considers where styles come from (origin) and cascade layers. Those details are beyond this lesson; the sequence above is the working method for the ordinary author CSS used here.

Specificity uses columns, not a decimal score. Write four separate counts as (inline styles, IDs, classes/attributes/pseudo-classes, types/pseudo-elements):

Type
(0, 0, 0, 1)
p { }

Class
(0, 0, 1, 0)
.text { }

ID
(0, 1, 0, 0)
#main { }

Inline
(1, 0, 0, 0)
style=""

Compare the columns from left to right; the first different column decides. For example, p.intro#banner has (0, 1, 1, 1). The counts are never added together. Even 11 classes, (0, 0, 11, 0), do not beat one ID, (0, 1, 0, 0), because the ID column is compared first.

Source order is the final tiebreaker. When two declarations have the same importance status and specificity, the one that appears later wins:

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

This works across internal and external stylesheets too. Their type does not decide the winner. Here both p selectors have equal specificity, so the internal rule wins only because its <style> block appears after the external <link>:

/* style.css — loaded first */
p { color: blue; }

<!-- In the HTML head -->
<link rel="stylesheet" href="style.css">
<style>
  p { color: red; } /* later — this wins */
</style>

If the <link> appeared after the <style> block instead, the equally specific external rule would be later and blue would win.

A practical specificity example

/* In style.css */
p { color: blue; }          /* (0, 0, 0, 1) */
.intro { color: red; }     /* (0, 0, 1, 0) */
#main-text { color: green; } /* (0, 1, 0, 0) */

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

All four declarations are normal (none is !important), so compare specificity. Result: purple — the inline style's (1, 0, 0, 0) beats the stylesheet selectors.

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; }        /* type selector — (0, 0, 0, 1) */
.intro { color: red; }   /* class selector — (0, 0, 1, 0) */

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

All three declarations are normal, so their !important status is equal.

Compare specificity tuples left to right: p is (0, 0, 0, 1), while .intro is (0, 0, 1, 0).

The inline style is (1, 0, 0, 0). Its first column wins, so no source-order tiebreaker is needed.

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. Its specificity (0, 0, 1, 0) beats the type selector p at (0, 0, 0, 1) when the columns are compared from left to right.

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 is the final tiebreaker when importance status and specificity are equal. Between normal declarations, a class selector (.intro) written first still beats a type selector (p) written last because specificity is compared before source 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 in ordinary author CSS, compare !important status first. If that is equal, write specificity as (inline, IDs, classes/attributes/pseudo-classes, types/pseudo-elements) and compare left to right — never total the columns. If the tuples are equal, the later declaration 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 tuples: Write the four columns on the board as (inline, IDs, classes/attributes/pseudo-classes, types/pseudo-elements). Q5 is an excellent exam-style question — pupils must compare the columns from left to right and identify the winner. Reinforce that the counts are not added.

Q10 (!important): !important is not in the N5 spec as a required topic, but it appears in exam papers. Accept either "the author !important declaration beats the normal inline declaration in this example" OR "remove the inline style from the HTML" as correct approaches.