Be able to apply styles to elements within a web page including to a list (ordered list, unordered list)

21. Website Authoring – Presentation Layer (CSS) & Basic HTML

Learning Objective

By the end of this lesson students will be able to:

  • Identify the three web‑development layers (content, presentation, behaviour) and match each to the relevant technology.

  • Write a correct HTML page skeleton and use the essential HTML elements required by the Cambridge IGCSE ICT 0417 syllabus.

  • Apply CSS styles (inline, internal, external) to any element, with a focus on ordered and unordered lists.

  • Explain the CSS cascade, calculate selector specificity and differentiate between relative and absolute paths.

  • Produce a simple, well‑styled web page that meets the Cambridge IGCSE exam requirements.

1. Web‑Development Layers (Syllabus 21.1)

LayerPurposeTypical Technology
ContentStructure and meaning of informationHTML
PresentationHow the content looks – layout, colours, fonts, etc.CSS
BehaviourInteraction and dynamic effectsJavaScript (not examined for IGCSE ICT 0417)

What the exam expects you to know

  • Content = HTML (elements, attributes, semantic tags).

  • Presentation = CSS (selectors, cascade, box model, list‑style).

  • Behaviour = JavaScript – mentioned only to show the three‑layer model.

2. HTML Fundamentals – Creating a Web Page (Syllabus 21.2)

2.1 Minimal Page Skeleton

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">               <!-- required -->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- required for mobile -->
<title>My First Web Page</title>      <!-- required – one per page -->
<!-- Optional meta data – useful for SEO -->
<meta name="description" content="Brief description of the page">
<meta name="keywords" content="HTML, CSS, IGCSE">
<!-- Internal stylesheet (optional) -->
<style>
/* CSS goes here */
</style>
<!-- External stylesheet – recommended for larger projects -->
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- Page content goes here -->
</body>
</html>

2.2 Required Content Elements

  • Headings – <h1> … </h1> to <h6>

  • Paragraphs – <p>

  • Lists – ordered <ol>, unordered <ul>, definition <dl>

  • Tables with <thead>, <tbody>, <th>, colspan, rowspan

  • Images – always include alt text for accessibility

  • Audio / Video – use controls attribute

  • Hyperlinks – external, internal, mailto:

  • Divisions – <div> for layout, plus optional semantic tags (<header>, <nav>, <section>, <footer>)

  • Class and ID attributes – classes reusable, IDs unique

2.3 Semantic HTML – a quick reminder

While the syllabus only requires <div>, using semantic elements makes the markup clearer and improves accessibility.

<header>…</header>
<nav>…</nav>
<section>…</section>
<article>…</article>
<footer>…</footer>

2.4 Accessibility Checklist (exam tip)

  • Every <img> must have an alt attribute that describes the image.

  • Link text should be meaningful out of context (e.g., “Cambridge International” instead of “click here”).

  • Use headings in hierarchical order – <h1> only once per page.

3. CSS Fundamentals – Presentation Layer (Syllabus 21.3)

3.1 Where CSS Can Be Placed

  • Inline – <h1 style="color:red;">Title</h1>

  • Internal (embedded) – inside a <style> block in the <head>

  • External – separate .css file linked with <link rel="stylesheet" href="css/styles.css">

3.2 Basic CSS Syntax

selector {
property: value;
property: value;
}

Example – make every paragraph blue:

p {
color: blue;
}

3.3 The Cascade & Specificity (Quick‑Reference)

SourceOrder of Precedence (low → high)
Browser default styles1
External stylesheet2
Internal stylesheet3
Inline style attribute4

Specificity is calculated as inline‑style, ID, class/attribute/pseudo‑class, element/pseudo‑element (a‑b‑c‑d). The higher the number, the stronger the rule.

Selector TypeSpecificity Value (a‑b‑c‑d)
Element (e.g., p)0‑0‑0‑1
Class, attribute or pseudo‑class (e.g., .note, [type="text"], :hover)0‑0‑1‑0
ID (e.g., #header)0‑1‑0‑0
Inline style attribute1‑0‑0‑0

Example – overriding an external rule with an inline style

/* external.css */
p { color: green; }          /* specificity 0‑0‑0‑1 */
/* inline on the element */
<p style="color: red;">Text</p>   /* overrides because 1‑0‑0‑0 > 0‑0‑0‑1 */

3.4 Relative vs. Absolute Paths

  • Relative path – starts from the current folder (e.g., css/styles.css).

  • Absolute URL – full web address (e.g., https://example.com/css/main.css).

3.5 Common Selectors Used in the Exam

/* element selector */
h1 { … }
/* class selector */
.box { … }
/* ID selector */
#menu { … }
/* descendant selector */
nav ul li { … }
/* group selector */
h1, h2, h3 { … }

3.6 The Box Model

.box {
width: 200px;               /* content width */
padding: 10px;              /* inside the border */
border: 2px solid #333;
margin: 15px;               /* outside the border */
}

3.7 Colours, Backgrounds & Text Decoration

.highlight {
background-color: #ffeb3b;
color: #000;
text-decoration: underline;
}

3.8 Relative Units for Responsive Design

  • em – relative to the current font size.

  • rem – relative to the root (html) font size.

  • % – relative to the parent element’s dimension.

Simple responsive container example (exam‑friendly):

.container {
width: 90%;          /* 90 % of the viewport width */
max-width: 1200px;   /* never wider than 1200 px */
margin: 0 auto;      /* centre horizontally */
padding: 1rem;
}

3.9 Styling Ordered & Unordered Lists

Ordered Lists (<ol>)

PropertyTypical valuesEffect
list-style-typedecimal, lower-alpha, upper-roman, …Changes the numbering format.
list-style-positioninside, outsidePlaces the marker inside or outside the list‑item box.
margin-leftany length (e.g., 2em)Indents the whole list.

/* Roman‑numeral ordered list, markers inside */
ol.roman {
list-style-type: upper-roman;
list-style-position: inside;
margin-left: 2em;
}

Unordered Lists (<ul>)

PropertyTypical valuesEffect
list-style-typedisc, circle, square, noneChanges the bullet shape.
list-style-imageurl('bullet.png')Uses a custom image as the bullet.
list-style-positioninside, outsideControls where the bullet appears.

/* Square‑bullet unordered list, markers outside */
ul.square {
list-style-type: square;
list-style-position: outside;
margin-left: 1.5em;
}

Combining List Markers with Text Styles

/* Keep marker black, but make list‑item text blue */
ul.coloured li {
color: blue;          /* text colour */
}
ul.coloured {
color: black;         /* marker colour */
}

4. Practical Activity – “list‑styles.html”

  1. Create a new file called list-styles.html.

  2. Copy the full HTML skeleton from Section 2 into the file.

  3. Inside the <head> add an internal stylesheet that defines:

    • .roman – ordered list using upper-roman markers.

    • .bullet – unordered list using circle markers.

    • .container – centres the page, adds padding and demonstrates a responsive layout.

  4. In the <body> create a <div class="container"> and place:

    • An <h1> title.

    • An ordered list with class roman.

    • An unordered list with class bullet.

  5. Save, open the file in a browser and verify that the markers appear as specified.

  6. Experiment:

    • Change list-style-position from outside to inside and note the visual difference.

    • Replace the bullet with a custom image using list-style-image.

Sample Solution (internal CSS)

<style>
.container {
max-width: 800px;
margin: 0 auto;
padding: 1rem;
font-family: Arial, sans-serif;
background-color: #f9f9f9;
}
/* Ordered list – Roman numerals */
ol.roman {
list-style-type: upper-roman;
list-style-position: outside;
margin-left: 2em;
}
/* Unordered list – Circle bullets */
ul.bullet {
list-style-type: circle;
list-style-position: outside;
margin-left: 1.5em;
}
</style>

5. Quick Revision Checklist (Exam‑Ready)

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

  • HTML head must contain charset and viewport meta‑tags; title is mandatory.

  • All images need an alt attribute; link text must be meaningful.

  • Use <div> or semantic tags for layout; classes reusable, IDs unique.

  • CSS placement order: external → internal → inline (inline wins).

  • Remember cascade order and specificity values (inline = 1‑0‑0‑0, ID = 0‑1‑0‑0, class = 0‑0‑1‑0, element = 0‑0‑0‑1).

  • Box model: content → padding → border → margin.

  • Responsive units: em, rem, %. Use a container with width:90%; max-width:1200px; for exam‑style layouts.

  • List‑style properties:

    • list-style-type (decimal, upper‑roman, disc, circle, square, none).

    • list-style-position (inside / outside).

    • list-style-image for custom bullets.