Know and understand characteristics of cascading stylesheets including the difference between attached stylesheets and inline style attributes, the hierarchy of multiple attached stylesheets and inline styles within a web page

21 Website Authoring – Cascading Style Sheets (CSS)

Learning Objectives

  1. Know / Understand

    • The three web‑development layers (content, presentation, behaviour) and the role of CSS as the presentation layer.

    • All required elements for the <head> section of an IGCSE web page (title, charset, meta‑tags, external stylesheet links).

    • How to attach external style‑sheets, write internal style blocks and use inline style attributes.

    • The cascade order for multiple external style‑sheets, internal blocks and inline styles.

    • The difference between element selectors (a “style”) and reusable class or ID selectors.

    • Why relative file paths are used when linking style‑sheets.

    • The typical use of the <div> element for grouping content and applying classes/IDs.

  2. Be Able To

    • Create a generic external style‑sheet (saved as .css) that defines background, font and table properties.

    • Write inline style attributes for background and font properties.

    • Define reusable classes and ID selectors and apply them with class="…" or id="…".

    • Link several external style‑sheets in the correct order and use comments in a CSS file.

    • Apply CSS to headings, paragraphs, lists, tables, images, video/audio, hyperlinks and <div> containers.

1. The Three Web‑Development Layers

LayerTechnologyPurpose (IGCSE focus)
ContentHTML / XMLStructure and meaning of the page.
PresentationCSSColours, fonts, layout, spacing, borders, background images, etc.
BehaviourJavaScript (optional)Interactivity and dynamic effects – not required for the 0417 syllabus.

2. Required <head> Elements (IGCSE 0417)

The syllabus expects the following tags in every web page. They can be written in any order, but the <title> should appear before the external stylesheet links.

<head>
<meta charset="UTF-8">                       <!-- defines character set -->
<title>My School Site</title>                <!-- page title shown in the browser tab -->
<meta name="description" content="Brief description of the page">
<meta name="keywords"    content="school, news, events">
<meta name="author"      content="Your Name">
<meta name="viewport"    content="width=device-width, initial-scale=1.0">  <!-- makes the page responsive -->
<!-- External style‑sheets – use relative paths and link in the required order -->
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/layout.css">
<link rel="stylesheet" href="./css/theme.css">
</head>

3. Ways to Apply CSS

  • External (attached) stylesheet – a separate .css file linked with <link rel="stylesheet" href="…"> in the <head>.

  • Internal stylesheet – CSS placed inside a <style> element in the page’s <head>. Used for page‑specific overrides.

  • Inline style attribute – CSS written directly in an element’s style attribute. Highest normal priority.

3.1. External Stylesheet (example styles.css)

/* styles.css – generic presentation rules */
/* ---------- background ---------- */
body {
background-color: #f4f4f4;               /* light grey page background */
background-image: url("./images/bg.png");/* relative path – works on any server */
background-repeat: no-repeat;
background-position: center center;
}
/* ---------- fonts ---------- */
h1, h2, h3 {
font-family: "Arial", sans-serif;
color: #003366;                         /* dark blue headings */
}
p, li {
font-family: "Georgia", serif;
font-size: 1rem;
color: #333333;                         /* dark grey body text */
}
/* ---------- tables ---------- */
table {
border-collapse: collapse;               /* single line between cells */
width: 100%;
}
th, td {
border: 1px solid #999999;
padding: 0.5rem;
text-align: center;
vertical-align: middle;
}

3.2. Internal Stylesheet (inside the HTML page)

<style>
/* page‑specific overrides */
h1 { color: #006600; }                     /* dark green heading for this page */
.highlight { background-color: #ffff99; } /* light yellow highlight */
</style>

3.3. Inline Style Attribute (single element)

<p style="background-color:#ffebcd; color:#8b0000; font-weight:bold;">
Important notice…
</p>

4. External vs. Inline – Characteristics

AspectExternal (attached) stylesheetInline style attribute
Typical useSite‑wide or page‑specific presentation that can be reused.One‑off styling of a single element.
Advantages

  • One file controls many pages → easy maintenance.

  • Browser caches the file → faster subsequent loads.

  • HTML remains clean and readable.

  • Immediate visual change – no separate file to edit.

  • Useful for quick testing or dynamic changes via scripts.

Disadvantages

  • Extra HTTP request (mitigated by caching).

  • Changes affect every page that links to the sheet.

  • Clutters HTML markup.

  • Overrides external rules, making future maintenance harder.

  • Cannot be reused.

Typical file namestyle.css, layout.css etc.Not a file – written inside the element.

5. The CSS Cascade – Hierarchy of Rules (Cambridge focus)

When several rules could apply to the same element, the browser uses the following order (from lowest to highest priority):

  1. Browser default (user‑agent) stylesheet.

  2. External style‑sheets – applied in the order they appear in the HTML. Later sheets override earlier ones when selectors have the same specificity.

  3. Internal stylesheet (<style> block) – overrides external sheets.

  4. Inline style attribute – overrides both external and internal rules.

  5. Declarations marked !important (advanced use – not required for the syllabus).

5.1. Example – Multiple External Sheets

<head>
<link rel="stylesheet" href="./css/reset.css">   
<link rel="stylesheet" href="./css/layout.css"> 
<link rel="stylesheet" href="./css/theme.css">  
</head>

In this example, a rule p { color: blue; } in theme.css will override a conflicting rule in layout.css because theme.css is linked later.

6. Selectors – Styles, Classes and IDs

Selector typeSyntaxPurpose / Specificity
Element selector (style)p { … }Applies to every <p> element – low specificity.
Class selector.highlight { … }Reusable set of properties. Applied with class="highlight". Medium specificity.
ID selector#mainHeader { … }Targets a single, unique element. Applied with id="mainHeader". Higher specificity than a class.

6.1. Example – Class for Table Styling

/* file: tables.css */
.table-striped {
border: 1px solid #666666;
border-collapse: collapse;
}
.table-striped tr:nth-child(even) {
background-color: #eaeaea;
}
.table-striped th,
.table-striped td {
padding: 0.4rem 0.6rem;
text-align: left;
}

HTML usage:

<table class="table-striped">
<thead>
<tr><th>Name</th><th>Score</th></tr>
</thead>
<tbody>
<tr><td>Alice</td><td>85</td></tr>
<tr><td>Bob</td><td>78</td></tr>
</tbody>
</table>

6.2. Example – Using an ID on a <div>

/* file: layout.css */
#sidebar {
width: 250px;
float: right;
background-color: #f0f0f0;
}

<div id="sidebar">
<h3>Quick Links</h3>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>

7. Practical CSS Properties Required by the Syllabus

7.1. Background Properties

  • background-color – solid colour.

  • background-image – url("path") (use relative paths).

  • background-repeat – repeat, no-repeat, repeat-x, repeat-y.

  • background-position – e.g. center center, top left.

7.2. Font & Text Properties

  • font-family – e.g. "Arial", sans-serif.

  • font-size – e.g. 1rem or 16px.

  • font-weight – normal or bold.

  • font-style – normal or italic.

  • text-align – left, center, right, justify.

  • color – named colours or hex values.

7.3. Table & Cell Properties

  • border, border-width, border-style, border-color.

  • border-collapse: collapse – single line between cells.

  • padding – space inside a cell.

  • margin – space outside the table (rarely used on tables).

  • text-align and vertical-align – horizontal and vertical alignment of cell content.

  • border-spacing – spacing between rows/columns when border-collapse: separate.

7.4. Heading, Paragraph, List & Link Styling (required elements)

/* headings */
h1 { font-family:"Verdana",sans-serif; font-size:2rem; color:#003366; text-align:center; }
h2 { font-family:"Verdana",sans-serif; font-size:1.5rem; color:#004080; }
h3 { font-family:"Verdana",sans-serif; font-size:1.25rem; color:#0055a0; }
/* paragraphs */
p { font-family:"Georgia",serif; font-size:1rem; color:#333333; line-height:1.5; }
/* lists */
ul, ol { margin-left:1.5rem; }
li { margin-bottom:0.3rem; }
/* hyperlinks */
a { color:#0066cc; text-decoration:none; }
a:hover { text-decoration:underline; }

8. Putting It All Together – Full Example Page (IGCSE‑aligned)

This snippet demonstrates:

  • All required <head> meta‑tags.

  • Three external style‑sheets linked in the correct order.

  • An internal stylesheet that overrides a heading colour.

  • Two inline style attributes (body background and a highlighted paragraph).

  • A reusable class (.important) and an ID selector (#sidebar) applied to a <div>.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>School Site – IGCSE Example</title>
<meta name="description" content="Sample page for Cambridge IGCSE CSS">
<meta name="keywords"    content="IGCSE, CSS, web design">
<meta name="author"      content="Your Name">
<meta name="viewport"    content="width=device-width, initial-scale=1.0">
<!-- External style‑sheets – relative paths – order matters -->
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/layout.css">
<link rel="stylesheet" href="./css/theme.css">
<!-- Internal stylesheet – page‑specific overrides -->
<style>
h1 { color:#660000; }                     /* dark red heading for this page */
.important { background-color:#ffdddd; } /* light red row highlight */
</style>
</head>
<body style="background-color:#f9f9f9;">   <!-- Inline background for body -->
<h1>Welcome to the School Site</h1>
<p style="font-weight:bold; color:#006600;">
This paragraph uses an inline style to emphasise the text.
</p>
<!-- Example of a 
 used for grouping and applying an ID selector -->
<div id="sidebar">
<h3>Quick Links</h3>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<table class="table-striped">
<thead>
<tr><th>Student</th><th>Score</th></tr>
</thead>
<tbody>
<tr class="important"><td>Alice</td><td>92</td></tr>
<tr><td>Bob</td><td>85</td></tr>
</tbody>
</table>
</body>
</html>

9. Summary Checklist

  • Three layers: HTML (content), CSS (presentation), JavaScript (behaviour – optional).

  • Required <head> tags: <title>, charset, description, keywords, author, viewport, and <link> elements for external CSS.

  • Use relative paths (e.g. ./css/style.css) when linking style‑sheets.

  • External → internal → inline is the cascade order; later external sheets override earlier ones.

  • Element selectors are “styles”; class selectors (.class) and ID selectors (#id) are reusable and have higher specificity.

  • The <div> element groups content and is the most common container for applying classes or IDs.

  • Remember the key CSS properties required by the syllabus: background, font, colour, text‑align, border, padding, margin, border‑collapse, and table‑specific properties.