Be able to create external styles to be tagged in a web page including h1, h2, h3, p, li

Topic 21 – Website Authoring: External Stylesheets

Learning outcomes (what you must be able to do)

  • Explain the three web‑development layers – content (HTML), presentation (CSS) and behaviour (JavaScript) – and state which are required for the IGCSE exam.

  • Recall the purpose of an external stylesheet and the correct syntax for linking it.

  • Write CSS selectors to style h1, h2, h3, p and li elements.

  • Analyse the advantages and disadvantages of external, internal (embedded) and inline CSS.

  • Evaluate how CSS specificity, the cascade and inheritance affect the final appearance of a page.

  • Use semantic HTML5 elements (<header>, <nav>, <section>, <article>, <aside>, <footer>) together with an external stylesheet.

  • Design a simple responsive layout using a media query.

  • Apply basic accessibility guidelines (alt text, colour contrast, ARIA roles) when creating a web page.

  • Distinguish between relative and absolute file paths when linking CSS, images, or other pages.

  • Construct a two‑column layout with Flexbox (or Grid) to demonstrate control of the presentation layer.

1. The three web‑development layers

LayerPurposeTypical technology
ContentStructure and meaning of the pageHTML5
PresentationHow the content looksCSS
BehaviourInteractivity and dynamic effectsJavaScript (not required for the IGCSE exam)

Only the content and presentation layers are examined in Cambridge IGCSE 0417. The behaviour layer is mentioned for completeness.

2. What is an external stylesheet?

An external stylesheet is a separate file (normally styles.css) that contains all CSS rules for one or more web pages. Benefits:

  • Reduces the size of each HTML file → faster download.

  • One‑file change updates the look of every page that links to it.

  • Improves maintainability – styles are edited in a single place.

3. Linking an external stylesheet

Place a <link> element inside the <head> of every page that should use the stylesheet.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A short description of the page for search engines">
<meta name="keywords" content="HTML, CSS, IGCSE, web design">
<meta name="author" content="Your Name">
<title>My Web Page</title>
<link rel="stylesheet" href="css/styles.css">  <!-- relative path – keep the site portable -->
</head>
<body>
…
</body>
</html>

Relative vs. absolute paths

TypeExampleWhen to use
Relativehref="css/styles.css"Resources stored within the same project – makes the site portable.
Absolutehref="https://cdn.example.com/css/styles.css"Linking to a resource on another domain or a CDN.

4. Required HTML elements & attributes (IGCSE 0417 §21.2)

  • Document structure: <!DOCTYPE html>, <html>, <head>, <body>

  • Metadata: charset, viewport, description, keywords, author

  • Semantic tags: <header>, <nav>, <section>, <article>, <aside>, <footer>

  • Textual content: <h1>–<h6>, <p>, <ul>, <ol>, <li>

  • Links & anchors: <a href="url">, id for bookmarks, target="_blank" (optional)

  • Images: <img src="…" alt="…">

  • Video: <video src="…" controls></video>

  • Tables: <table>, <thead>, <tbody>, <tr>, <th>, <td>

  • Division & class attributes for layout: <div class="…">

5. CSS selectors for the required tags

SelectorElements affectedTypical styling
h1All <h1> headingsLarge, bold, centred title
h2All <h2> headingsSection headings – slightly smaller than h1
h3All <h3> headingsSub‑section headings
pAll paragraph elementsLine‑height, margin, colour
liAll list itemsBullet/number style, indentation

6. Example external stylesheet (css/styles.css)

/* -------------------------------------------------
styles.css – external stylesheet for the demo
------------------------------------------------- */
/* 1. Page title */
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 2.5rem;
color: #003366;
text-align: center;
margin-top: 0;
}
/* 2. Section headings */
h2 {
font-family: Verdana, sans-serif;
font-size: 2rem;
color: #006699;
margin-bottom: 0.5rem;
}
/* 3. Sub‑section headings */
h3 {
font-family: Georgia, serif;
font-size: 1.5rem;
color: #0099CC;
margin-top: 1rem;
}
/* 4. Paragraph text */
p {
font-family: "Times New Roman", Times, serif;
font-size: 1rem;
line-height: 1.5;
color: #333333;
margin-bottom: 1rem;
}
/* 5. List items */
li {
font-family: Helvetica, sans-serif;
font-size: 0.95rem;
color: #444444;
margin-left: 1.5rem;
}
/* 6. Flexbox two‑column layout */
.container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.main {
flex: 2 1 60%;   /* grow, shrink, basis */
}
.sidebar {
flex: 1 1 30%;
}
/* 7. Responsive headings – media queries */
@media (min-width: 600px) {
h1 { font-size: 3rem; }
h2 { font-size: 2.5rem; }
}
@media (max-width: 599px) {
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
}
/* 8. Accessibility helper – high contrast */
.high-contrast {
color: #000000;
background-color: #FFFFFF;
}

7. Example HTML page (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Demo page for external stylesheet">
<meta name="keywords" content="HTML, CSS, IGCSE">
<meta name="author" content="Your Name">
<title>External Stylesheet Demo</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
<h1>My Website Title</h1>
</header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<section class="container">
<article class="main">
<h2 id="home">Section Heading</h2>
<p>This paragraph demonstrates the external CSS styling – line‑height, colour and margin.</p>
<h3>Sub‑section</h3>
<p>A list follows:</p>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<figure>
<img src="images/photo.jpg" alt="A description of the photo">
<figcaption>Sample image with proper alt text.</figcaption>
</figure>
</article>
<aside class="sidebar">
<h2 id="about">Sidebar</h2>
<p>A short side note. The layout collapses on narrow screens.</p>
</aside>
</section>
<footer>
<p>&copy; 2025 My School – All rights reserved.</p>
</footer>
</body>
</html>

8. Comparing CSS inclusion methods (AO3 – analysis)

MethodSyntax exampleProsCons
External<link rel="stylesheet" href="css/styles.css">Reusable across pages; cached after first load → faster subsequent pages; easy maintenance.Extra HTTP request (mitigated by caching and compression).
Internal (embedded)<style> … </style> inside <head>Only one file to upload; useful for a single‑page demo.Not reusable; increases page size; harder to keep consistent across multiple pages.
Inline<p style="color:red;">…</p>Quick for a one‑off change.Breaks separation of content & presentation; very difficult to maintain; overrides most other rules.

9. CSS specificity, cascade & inheritance (AO3 – evaluation)

  1. Importance – !important overrides normal rules (use sparingly).

  2. Specificity hierarchy (higher wins):

    • Inline style – 1‑0‑0‑0

    • ID selector – 0‑1‑0‑0

    • Class, attribute, pseudo‑class – 0‑0‑1‑0

    • Element selector – 0‑0‑0‑1

  3. Source order – when specificity is equal, the later rule in the stylesheet wins.

Debugging exercise

<!-- index.html -->
<head>
<link rel="stylesheet" href="css/styles.css">
<style>
h2 { color: green; }
</style>
</head>
<body>
<h2 style="color: orange;">Heading</h2>
</body>

Which colour is displayed and why? Answer: orange – the inline style has the highest specificity.

10. Responsive design – simple media query

Make headings larger on screens wider than 600 px and smaller on mobile devices.

/* responsive.css – included in styles.css */
@media (min-width: 600px) {
h1 { font-size: 3rem; }
h2 { font-size: 2.5rem; }
.sidebar { background-color: #f0f0f0; }
}
@media (max-width: 599px) {
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
.sidebar { background-color: #e8e8e8; }
}

11. Accessibility checklist (e‑safety & audience)

  • Provide meaningful alt text for every <img>.

  • Ensure colour contrast meets WCAG AA (minimum 4.5:1 for normal text).

  • Use semantic HTML5 tags (see section 5).

  • Declare the page language with lang="en" (or appropriate language).

  • If interactive elements are added later, include ARIA roles (e.g., role="navigation").

12. Practice activities (apply & evaluate)

  1. Create a folder called website. Inside, make sub‑folders css and images.

  2. Save the HTML example above as index.html. Adjust the href if you placed styles.css elsewhere.

  3. Save the CSS example as css/styles.css.

  4. Open index.html in a browser – verify layout, colours, and responsive behaviour.

  5. Analysis task: Using the table in section 8, write a short paragraph (3‑4 sentences) comparing external, internal and inline CSS for this page. Mention at least one point about page‑load speed and one about maintainability.

  6. Debugging task: Add the following rule to the end of styles.css and note which colour appears on all h2 headings:

    h2 { color: red !important; }

    Explain why !important overrides the earlier rule.

  7. Responsive test: Resize the browser window below 600 px. Observe the heading size change and the background colour of the sidebar. Then modify the media query to also change the font-weight of p on small screens.

  8. Accessibility check: Insert an image:

    <img src="images/photo.jpg" alt="A description of the photo">

    Use a colour‑contrast analyser to confirm that body text meets the 4.5:1 ratio.

13. Quick revision checklist

  • Three layers – content (HTML), presentation (CSS), behaviour (JS – not examined).

  • Correct <link> syntax and required meta tags.

  • Selectors for h1–h3, p, li.

  • Advantages/disadvantages of external, internal, inline CSS.

  • Specificity order: inline > ID > class/attribute > element.

  • Media query breakpoint at 600 px.

  • Flexbox two‑column layout that collapses on small screens.

  • Accessibility basics: alt text, colour contrast, semantic tags, language attribute.

  • Relative paths keep the site portable; absolute paths for external resources.