Cascading Style Sheets
Senior 4 · ICT
Cascading Style Sheets
Lesson 3 of 3
25 min
A school website may have forty pages. If the colour of every heading were set inside each page, changing the school's colour would mean editing forty files, and one would certainly be missed. Where you put your CSS matters as much as what you write. There are three places, and each has its job.
Definition
Inline CSS: declarations written in the style attribute of one element: <p style="color: red;">. It styles only that element.
Internal (embedded) style sheet: rules written in a <style> element in the page's <head>. They style only that page.
External style sheet: rules saved in a separate text file ending in .css, connected to each page by a <link rel="stylesheet" href="…"> element in its head. One file can style a whole site.
Cascade: the set of rules a browser uses to decide which declaration applies when several set the same property on the same element.
An inline style has no selector and no braces: the element it is written on is the target. It is quick, and it beats rules from style sheets, but it mixes appearance back into the HTML, cannot be reused, and is hard to override later. Use it rarely, for a single exception or for a quick test.
Run it. Only the two elements with a style attribute change. To give a second warning the same look, you would have to copy the whole attribute: that repetition is exactly what style sheets avoid. (The date in the notice is illustrative.)
Every example in Lessons 1 and 2 used an internal style sheet: a <style> element inside <head>. Its rules apply to the whole page but only to that page. It suits a one-page site, a single page that needs a special look, and trying out ideas, as in these lessons.
Save the rules, without any <style> tags, in a file such as style.css, usually in a css folder. Then add one line to the head of every page:
This page needs the file css/style.css next to it, so it is not run here. rel="stylesheet" says what the linked file is for; href is a relative path, worked out exactly like the image paths of Unit 5.
A page in a sub-folder needs ../ to climb to the site's top folder first. The browser downloads style.css once and keeps it in its cache, so the other pages load faster, and a change saved in that one file restyles every page at once.
This is a complete style.css. Press Run: the playground applies it to a sample page that has an h1, an h2, a paragraph with a link and bold text, a button, a list, a div with class="box" and one with id="container". Change the colour in the h1, h2 rule and run again: on a real site, that one edit would recolour every heading on every page.
| Inline | Internal | External | |
|---|---|---|---|
| Written in | style attribute | <style> in the head | a separate .css file |
| Styles | one element | one page | every page that links it |
| Reusable? | No | Within the page | Across the site |
| Cached by the browser? | No | No | Yes |
| Best for | a one-off exception, a quick test, HTML emails | a single-page site, a page-specific style | every multi-page website |
A page can have browser defaults, an external sheet, an internal sheet and inline styles all at once, and several rules may set the same property, such as color, on the same paragraph. The browser settles every conflict the same way:
!important beats normal ones; it is a last resort, because it makes later changes very hard.<link>, so its rules win ties against the external sheet; put the link after the <style> and the opposite happens.Calculating specificity. Count three numbers for a selector: (ids, classes and pseudo-classes, types). Compare them from the left, like the digits of a number: the first difference decides. So #menu a = (1, 0, 1) beats .menu li a = (0, 1, 2), because 1 id beats 0 ids, however many classes and types the other has.
Inheritance. Some properties pass from a parent to its children unless a rule sets them on the child: text properties such as color, font-family, font-size and line-height are inherited. Box properties such as border, padding, margin and background are not. A rule that targets an element directly always beats a value it would inherit.
Before you press Run, predict the colour of each numbered line. Then check with the worked example below.
Worked example 1: explain every colour
| Line | Result | Reason |
|---|---|---|
| 1 | orange | Two p rules, equal specificity (0, 0, 1): the later one wins. |
| 2 | green | .note (0, 1, 0) beats p (0, 0, 1). |
| 3 | blue | #first (1, 0, 0) beats .note and p. |
| 4 | crimson | The inline style beats every selector. |
| 5 | purple, bold, with a border | The text belongs directly to the section, which the section rule styles. |
| 6 | orange, bold and italic, no border of its own | The p rule sets its colour directly, which beats the inherited purple. font-weight is inherited from the section, so it is bold; section p makes it italic; border is not inherited. |
Worked example 2: which rule colours the link?
The HTML is <nav id="menu" class="menu"><ul><li><a href="#">Home</a></li></ul></nav>, and the style sheet contains, in this order:
#menu a { color: red; }
.menu li a { color: green; }
nav ul li a { color: blue; }
a { color: black; }| Selector | (ids, classes, types) |
|---|---|
#menu a | (1, 0, 1) |
.menu li a | (0, 1, 2) |
nav ul li a | (0, 0, 4) |
a | (0, 0, 1) |
All four match the link. Compare the first number: only #menu a has an id, so the link is red, even though three rules come after it. Four type selectors, (0, 0, 4), never add up to one class: specificity is compared column by column, not added.
Worked example 3: choose the method
style="display: none" is acceptable as a temporary patch, but it should be replaced by a rule in the style sheet.
Kevin Powell: CSS Specificity explained. Watch how ids, classes and element selectors are weighed against each other, and why an id selector beats any number of classes.
Warning
href points to the wrong place, the browser shows the page with no styling at all, and no error. Check the folder and the spelling, in lower case.<style> tags inside a .css file. A .css file contains only rules.!important and long chains of ids. Each makes the next change harder; keep selectors as simple as the job allows.Tip
"Closer and more specific wins." Inline is closest to the element, then ids, then classes, then types; when two are equally specific, the later one wins. When a style does not apply, right-click the element, choose Inspect, and look for your rule crossed out: the developer tools show which rule beat it.
Practice
#0b6e4f for a paragraph, in all three ways: inline, internal and external (give the line that links the external file).index.html in its top folder, css/main.css, and a page news/2026/june.html. Write the <link> element for june.html.ul li; (b) .menu a:hover; (c) #footer p; (d) header .logo img..price and div span, and both set color. Which wins, and why?style.css (which sets h1 { color: blue; }) and then has an internal sheet with h1 { color: red; }. What colour are the h1 headings? What if the link came after the style element?div with border: 1px solid black; color: navy; has no rules of its own. Does it get a border? Is its text navy? Explain.<p style="color: #0b6e4f;">. Internal: <style> p { color: #0b6e4f; } </style> in the head. External: p { color: #0b6e4f; } in a file such as style.css, linked with <link rel="stylesheet" href="style.css">.<link rel="stylesheet" href="../../css/main.css">: up two folders (2026, then news), then into css..price, (0, 1, 0), beats div span, (0, 0, 2): one class outweighs any number of type selectors.color is inherited from the parent.Key points
style attribute, one element), internal (<style> in the head, one page), external (.css file linked with <link rel="stylesheet" href="…">, a whole site).Further reading
Sources and credits
This lesson adapts CC BY-SA material and is shared under CC BY-SA 4.0.
<h2 style="color: #0b3d66; text-align: center;">Notice board</h2>
<p>The library is open until 6 p.m.</p>
<p style="color: crimson; font-weight: bold;">Exams start on Monday 2 November.</p>
<p>Club meetings continue as normal.</p><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>S4 ICT Club</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>S4 ICT Club</h1>
<p>Every page of the site links to the same style sheet.</p>
</body>
</html>/* css/style.css: one style sheet for the whole site */
body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
color: #222222;
max-width: 700px;
margin: 0 auto;
}
h1, h2 { color: #0b3d66; }
h2 {
border-bottom: 2px solid #E69F00;
padding-bottom: 4px;
}
a { color: #0b6e4f; }
strong { color: #b34700; }
button {
background-color: #0b3d66;
color: white;
border: none;
padding: 8px 16px;
border-radius: 6px;
}
li { margin-bottom: 4px; }
.box {
background-color: #fff3cd;
border-left: 4px solid #E69F00;
padding: 12px;
margin: 12px 0;
}
#container {
border: 2px dashed #0072B2;
padding: 12px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Who wins?</title>
<style>
p { color: gray; }
.note { color: green; }
#first { color: blue; }
p { color: orange; } /* same specificity as line 1, but later */
section { color: purple; font-weight: bold;
border: 2px solid purple; padding: 8px; }
section p { font-style: italic; }
</style>
</head>
<body>
<p>1. Only type selectors match me.</p>
<p class="note">2. I have the class note.</p>
<p class="note" id="first">3. I have the class note and the id first.</p>
<p class="note" style="color: crimson;">4. I have an inline style.</p>
<section>
5. Text directly inside the section.
<p>6. A paragraph inside the section.</p>
</section>
</body>
</html>Quick check
A school website has 40 pages that must all look the same. Where should its CSS go?