Be able to attach comments to an external stylesheet

ICT 0417 – Website Authoring

Learning Objective

Students will be able to create, comment, and attach an external stylesheet to an HTML document, understand the three web‑development layers, and see how this fits into the Cambridge IGCSE (0417) syllabus.

1. Syllabus Context – The Three Web‑Development Layers

Syllabus AreaKey Idea for Web Authoring
1.1 – Computer hardware & softwareOperating system & browser render HTML/CSS.
1.2 – Input & output devicesKeyboard for coding; monitor for visual feedback.
1.3 – StorageFiles saved as .html and .css in a logical folder hierarchy.
1.4 – Networks & the InternetPages transferred via HTTP; use relative URLs so the site works on any server.
1.5 – E‑safety & legal issuesRespect copyright, use licences, and add alt text for accessibility.
1.6 – Systems life‑cyclePlan → design → develop → test → maintain a web page.
1.7 – Data representationHTML = text‑based markup; CSS = property/value pairs.
1.8 – Algorithms & problem solvingBreak a page into sections (header, nav, main, footer) and reuse CSS classes.
1.9 – Spreadsheets & databases (context)HTML tables display tabular data; CSS controls appearance.
1.10 – Presentations (context)Web pages are digital presentations; layout techniques mirror slide design.

Behaviour Layer (Not required for the exam)

The behaviour layer adds interactivity with client‑side scripting (e.g., JavaScript). In the IGCSE exam only HTML (content) and CSS (presentation) are required, but limited interactivity can still be achieved using CSS alone, for example the :hover pseudo‑class:

/* Change link colour when the mouse is over it */
a:hover { colour: #ff6600; }

2. Development Workflow & File Structure

  • Plan – sketch a wire‑frame and list required elements.

  • Folder set‑up

    • index.html – main page

    • css/ – external stylesheets (e.g., styles.css)

    • images/ – graphics, icons, photos

    • media/ – audio & video files

  • Write HTML – use a plain‑text editor (VS Code, Notepad++, Sublime).

  • Link CSS – <link rel="stylesheet" href="css/styles.css"> inside the <head> (relative path).

  • Test – open in at least two browsers (Chrome, Firefox) and check layout.

  • Validate – W3C HTML validator and CSS validator.

  • Maintain – comment code, use version control (Git) or simple numbered backups.

3. HTML Fundamentals – Content Layer

3.1 Required Document Structure (HTML5)

<!DOCTYPE html>               <!-- HTML5 doctype – required by the syllabus -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
…content goes here…
</body>
</html>

3.2 Essential Meta‑tags

Meta‑tagPurpose
<meta charset="UTF-8">Defines character encoding.
<meta name="viewport" content="width=device-width, initial-scale=1">Enables responsive design on mobile devices.
<meta name="description" content="Brief page summary">SEO – used by search engines.
<meta name="keywords" content="HTML, CSS, IGCSE">Optional SEO keywords.
<meta name="author" content="Your Name">Identifies the creator.

3.3 Common HTML Elements & Accessibility

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

  • Paragraphs: <p>…</p>

  • Lists: <ol>, <ul>, <dl>

  • Tables: Use <table> only for tabular data. Add <caption>, <thead>, <tbody> for accessibility.

  • Images: <img src="images/pic.jpg" alt="Descriptive text"> – alt is mandatory for e‑safety & accessibility.

  • Audio / Video: <audio controls>…</audio>, <video controls>…</video>

  • Links: <a href="page.html">Link text</a>

  • Bookmarks & internal links: <a id="section1"> + <a href="#section1">

  • Forms: Include label elements linked via for attribute for each form control.

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

3.4 Mini‑Activity – Build a Simple Page

  1. Create a folder called site with sub‑folders css and images.

  2. Save the HTML skeleton above as index.html.

  3. Add a heading, a paragraph, an image (with alt), and a navigation list.

  4. Open the file in two browsers; note any visual differences.

4. CSS Fundamentals – Presentation Layer

4.1 Linking an External Stylesheet

Place the following line inside the <head> of every page that should share the same design:

<link rel="stylesheet" href="css/styles.css">

Remember: use a relative path (no leading / or drive letters) so the site works when moved to a different server.

4.2 Selectors, Properties & Values (Exam‑focused)

Selector TypeExampleWhat it selects
Elementp { … }All <p> elements.
Class.highlight { … }Any element with class="highlight".
ID#mainNav { … }Element with id="mainNav" (unique).
Descendantnav ul li { … }<li> inside a <ul> inside a <nav>.
Attributea[href$=".pdf"] { … }All links ending with “.pdf”.
Pseudo‑classa:hover { … }When the mouse pointer is over a link.

4.3 Minimum CSS Properties Required for the Exam

PropertyPurposeTypical Value
marginSpace outside the element.margin: 0 1rem;
paddingSpace inside the element.padding: 10px 20px;
borderOutline of the element.border: 2px solid #333;
backgroundBackground colour or image.background: #f0f0f0;
font-familyTypeface for text.font-family: Arial, sans-serif;
font-sizeSize of text.font-size: 1.2rem;
colourText colour.colour: #333;
text-alignHorizontal alignment of text.text-align: centre;
displayLayout behaviour (block, inline, flex, grid).display: flex;
positionStatic, relative, absolute, fixed, sticky.position: relative;

4.4 CSS Units – Relative vs. Absolute

UnitTypeTypical Use
pxAbsolutePrecise borders, images.
emRelative to the font‑size of the parent element.Scalable typography.
remRelative to the root (html) font‑size.Consistent spacing across the page.
%Relative to the parent element’s dimensions.Widths, heights, margins.

4.5 Cascade, Inheritance & Specificity

  • Cascade: When several rules match, the rule with the highest origin wins (user‑agent < < user < < author).

  • Inheritance: Text‑related properties (colour, font‑family, line‑height) are passed from parent to child unless overridden.

  • Specificity hierarchy (low → high):

    1. Element selectors – 0‑0‑1

    2. Class, attribute, pseudo‑class selectors – 0‑1‑0

    3. ID selectors – 1‑0‑0

    4. Inline style attribute – 1‑0‑0‑0 (highest author level)

4.6 Media Queries – Simple Responsive Example

/* Tablet and larger screens */
@media (min-width: 768px) {
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
}
/* Mobile phones */
@media (max-width: 767px) {
.grid {
display: block;
}
}

Note: The IGCSE exam does not require responsive design, but understanding media queries helps students write modern, future‑proof code.

5. Comments – Documenting CSS & HTML

5.1 CSS Comment Syntax

  • Single‑line comment (still a multi‑line comment with one line):

    /* Main navigation styles */

  • Multi‑line comment:

    /*
    Header layout
    Adjust for mobile view
    */

Important: CSS comments cannot be nested. Trying to place a comment inside another will cause a syntax error.

5.2 Why Comment?

  • Explain the purpose of a rule set (e.g., “reset”, “layout”, “components”).

  • Separate logical sections of the stylesheet.

  • Temporarily disable code while testing – the comment itself is ignored by the browser.

  • Provide guidance for other developers or for the student’s own future revisions.

In the IGCSE practical, comments are not counted towards the 70‑mark total, but they are required in the “evidence” documentation to demonstrate planning and reasoning (AO3).

5.3 Example – Commented CSS File

/* -------------------------------------------------
1. Reset – removes default browser spacing
------------------------------------------------- */
  • {
    • margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    /* -------------------------------------------------
    2. Global page settings
    ------------------------------------------------- */
    body {
    line-height: 1.6;
    colour: #333;
    background: #fafafa;
    }
    /* -------------------------------------------------
    3. Header
    ------------------------------------------------- */
    header {
    background: #003366;
    colour: #fff;
    text-align: centre;
    padding: 1rem;
    }
    /* -------------------------------------------------
    4. Navigation – comment out to test layout
    ------------------------------------------------- */
    /* nav {
    background: #005599;
    padding: 10px;
    } */

    5.4 Commenting Out the <link> Element (HTML)

    <!-- Link to external stylesheet -->
    <link rel="stylesheet" href="css/styles.css">
    <!-- To disable temporarily, wrap the line in an HTML comment:
    <!-- <link rel="stylesheet" href="css/styles.css"> -->
    -->

    6. Full Working Example – HTML + External CSS with Comments

    6.1 CSS File (css/styles.css)

    /* styles.css – External stylesheet */
    /* -------------------------------------------------
    1. Reset – removes default browser spacing
    ------------------------------------------------- */
  • {
    • margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    /* -------------------------------------------------
    2. Global page settings
    ------------------------------------------------- */
    body {
    line-height: 1.6;
    colour: #333;
    background: #fafafa;
    }
    /* -------------------------------------------------
    3. Header
    ------------------------------------------------- */
    header {
    background: #003366;
    colour: #fff;
    text-align: centre;
    padding: 1rem;
    }
    /* -------------------------------------------------
    4. Navigation – simple hover effect (behaviour layer)
    ------------------------------------------------- */
    nav a:hover {
    colour: #ff6600;
    }
    /* -------------------------------------------------
    5. Main content area
    ------------------------------------------------- */
    main {
    padding: 2rem;
    }
    /* -------------------------------------------------
    6. Footer
    ------------------------------------------------- */
    footer {
    background: #222;
    colour: #ddd;
    text-align: centre;
    padding: 1rem;
    }

    6.2 HTML File (index.html)

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First IGCSE Web Page</title>
    <link rel="stylesheet" href="css/styles.css">
    </head>
    <body>
    <header>
    <h1>Welcome to My Site</h1>
    </header>
    <nav>
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
    </ul>
    </nav>
    <main>
    <h2>About This Page</h2>
    <p>This page demonstrates how to <strong>link</strong> an external stylesheet and use CSS comments.</p>
    <img src="images/sample.jpg" alt="Sample illustration">
    </main>
    <footer>
    <p>&copy; 2026 Your Name</p>
    </footer>
    </body>
    </html>

    7. Quick Checklist for the IGCSE Practical

    • HTML file starts with <!DOCTYPE html>.

    • All required meta‑tags are present.

    • Use semantic tags (header, nav, main, footer).

    • Images include meaningful alt text.

    • Tables are used only for data, not layout.

    • External stylesheet linked with a relative path.

    • CSS file contains at least the minimum properties listed in 4.3.

    • Comments are added to separate sections; no nested comments.

    • Validate both HTML and CSS – no errors.

    • Test in two browsers; ensure layout is consistent.