Be able to create generic external styles and inline style attributes including background properties (colour, images), font properties, table, table row, table header and table data properties (size, background colour, horizontal and vertical alignm

21. Website Authoring

Learning Objective

Be able to create generic external style sheets and inline style attributes covering:

  • Background properties – colour, images

  • Font properties – family, size, colour, style, weight

  • Table, table‑row, table‑header and table‑data properties – size, background colour, horizontal & vertical alignment, spacing, padding, borders (including border‑collapse, colour, thickness, visible/invisible)

21.1 The Three‑Layer Model

  • Content layer – pure HTML that gives meaning to the information (headings, paragraphs, lists, tables, forms, media, links).

  • Presentation layer – CSS that controls how the content looks (colours, fonts, layout, borders, shadows, radius).

  • Behaviour layer – simple, JavaScript‑free interactivity such as anchor navigation, target and title attributes, email links, and download links.

When to use each layer

LayerTypical markupPurpose
Content<h1>…</h1>, <p>…</p>, <ul>, <table>, <form>Structure and semantics – what the page is about.
Presentation<link rel="stylesheet" href="css/style.css">, style="…"How the page looks – colours, fonts, spacing, borders, shadows.
Behaviour<a href="#top">Back to top</a>, target="_blank", title="…" How the user interacts – navigation, opening new windows, email/download links.

21.2 Required <head> Section

Every IGCSE web page must contain the following meta‑tags (in this order) and a link to an external 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="Brief description of the page">
<!-- keywords tag is optional for the exam – you may omit it to save time -->
<meta name="author" content="Your Name">
<title>Page title – ICT 0417</title>
<link rel="stylesheet" href="css/style.css">   <!-- relative path – never an absolute URL for local files -->
</head>

Why use relative paths?

  • They keep the site portable – the whole folder can be moved to another computer or uploaded to a server without breaking links.

  • Absolute paths (e.g. C:\files\style.css or http://example.com/style.css) are not allowed for local resources in the IGCSE exam.

  • The tag <meta http-equiv="X-UA-Compatible"> is not required for IGCSE and should be omitted.

21.3 Semantic HTML – The Content Layer

Use the element that best describes the meaning of the content, not just its visual appearance.

ElementTypical use
<h1>–<h6>Document headings, hierarchical structure
<p>Paragraph of text
<ul> / <ol> / <li>Unordered or ordered lists
<blockquote>Long quotations
<figure> + <figcaption>Images or diagrams with a caption
<section> / <article> / <nav>Logical page sections
<header>Introductory content (logo, site title, navigation)
<footer>Closing content (copyright, contact details)
<main>Primary content of the page (only one per page)
<aside>Related but separate content (sidebar, pull‑quote)
<form> + form controlsCollecting user data – optional for 0417 but may appear in a task

21.4 Links & Media (Behaviour Layer)

Anchor (<a>) syntax

<a href="https://www.example.com" target="_blank" title="Open example.com">Visit Example</a>
<a href="page2.html">Internal page</a>
<a href="mailto:student@example.com?subject=Question">Email teacher</a>
<a href="files/report.pdf" download>Download report</a>
<a href="#section3">Jump to Section 3</a>

Embedding images

<img src="images/logo.png" alt="School logo" width="120" height="80">

  • src – relative path to the image file.

  • alt – mandatory text description for accessibility and for cases where the image cannot load.

  • width / height – optional but help the browser reserve space before the image loads.

Embedding video (optional – useful for portfolio work)

<video controls width="480">
<source src="media/intro.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

21.5 CSS – Cascading, Selectors & Files

Cascading order (most specific → least specific)

  1. Inline style attribute (style="…") – overrides everything else.

  2. Internal stylesheet (<style>…</style> in the <head>).

  3. External stylesheet (<link rel="stylesheet">).

Selector types & specificity

SelectorSpecificity scoreExample
Element selector0‑0‑1p { … }
Class selector0‑1‑0.intro { … }
ID selector1‑0‑0#header { … }
Inline style1‑0‑0‑0 (highest)style="…"

If two rules have the same specificity, the one that appears later in the cascade wins.

Class vs. ID – when to use each

  • Class – reusable style applied to many elements (e.g., .button, .highlight).

  • ID – unique identifier for a single element on a page (e.g., #mainNav).

Quick reference: combinator selectors (not required but useful for higher‑level questions)

  • parent > child – direct child selector.

  • prev + next – adjacent sibling selector.

  • prev ~ siblings – general sibling selector.

  • ancestor descendant – descendant selector (space).

Example external stylesheet (css/style.css)

/* 1️⃣ Global page settings */
body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
margin: 0;
background-color: #fafafa;
}
/* 2️⃣ Reusable class for coloured boxes */
.box {
padding: 12px;
border: 1px solid #999;
background-color: #fff;
border-radius: 4px;          /* optional rounded corners */
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
/* 3️⃣ ID for the page header */
#pageHeader {
background-color: #003366;
color: #ffffff;
text-align: center;
padding: 20px 0;
}
/* 4️⃣ Table styling – used by many tables */
.table-styled {
width: 100%;
border-collapse: collapse;   /* clean grid */
border-spacing: 0;           /* no extra space when collapse is off */
margin-bottom: 1rem;
}
.table-styled th,
.table-styled td {
border: 1px solid #666;
padding: 8px;
text-align: left;
}
.table-styled th {
background-color: #e0e0e0;
}

Linking the external stylesheet (remember the relative path)

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

21.6 Presentation Properties

21.6.1 Background Properties

  • background-color – solid colour (hex, rgb, hsl, or colour name).

  • background-image – url('images/bg.png').

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

  • background-position – keywords (center, top left) or percentages.

  • background-size – cover, contain, or explicit dimensions.

  • background-attachment – scroll (default) or fixed.

Inline example

<div style="background-color:#e0e0e0;
background-image:url('pattern.png');
background-repeat:repeat;
background-position:center;
background-size:contain;
padding:10px;">
Content goes here
</div>

21.6.2 Font Properties

  • font-family – list of fallback fonts.

  • font-size – absolute (px, pt) or relative (em, rem, %).

  • font-weight – normal, bold, 100‑900.

  • font-style – normal, italic, oblique.

  • color – text colour.

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

  • line-height – spacing between lines.

  • letter-spacing & word-spacing – optional fine‑tuning.

Inline example

<p style="font-family:'Times New Roman', serif;
font-size:14pt;
font-weight:bold;
color:#333333;
text-align:center;
line-height:1.6;">
This paragraph uses an inline font style.
</p>

21.6.3 Table Styling

Tables can be styled at four levels: <table>, <tr>, <th>, and <td>.

ElementCommon propertiesTypical values / Example
<table>border, border-collapse, border-spacing, width, marginborder:2px solid #333; border-collapse:collapse; border-spacing:0; width:80%;
<tr>background‑color, heightbackground-color:#f9f9f9;
<th> / <td>padding, border, text‑align, vertical‑align, background‑color, width, height, border-radiuspadding:8px; border:1px solid #999; text-align:center; vertical-align:middle; border-radius:3px;

Inline table example (exam‑style)

<table style="border:2px solid #333; border-collapse:collapse; border-spacing:0; width:80%;">
<thead>
<tr style="background-color:#f2f2f2;">
<th style="padding:8px; border:1px solid #999; text-align:center;">Header 1</th>
<th style="padding:8px; border:1px solid #999; text-align:center;">Header 2</th>
</tr>
</thead>
<tbody>
<tr style="background-color:#ffffff;">
<td style="padding:6px; border:1px solid #999; text-align:left; vertical-align:top;">Row 1, Cell 1</td>
<td style="padding:6px; border:1px solid #999; text-align:right; vertical-align:bottom;">Row 1, Cell 2</td>
</tr>
<tr style="background-color:#e9e9e9;">
<td style="padding:6px; border:1px solid #999; text-align:center;" colspan="2">Spanning Cell</td>
</tr>
</tbody>
</table>

21.7 Practical Checklist for Exam Tasks

  1. Read the specification carefully – note every colour, size, alignment, spacing, and border requirement.

  2. Decide which layer to use:

    • External CSS for styles reused on several pages.

    • Internal <style> only if the question asks for a single‑page solution.

    • Inline style for a one‑off change or when the question explicitly requires it.

  3. Remember the order of the cascade – inline overrides everything.

  4. Check that every <img> has a meaningful alt attribute.

  5. Use the correct HTML5 semantic elements (<header>, <footer>, <main>, <aside>) where appropriate.

  6. Apply border‑collapse:collapse; and border‑spacing:0; together for a clean grid.

  7. Include optional decorative properties (border‑radius, box‑shadow) if the question asks for a “styled” look.

  8. Double‑check file names and locations:

    • HTML file must be named index.html (or the name given in the question).

    • CSS file must be named style.css (or the name given) and stored in the folder referenced by the href.

  9. Save all files in UTF‑8 encoding – this prevents character‑set errors.

  10. Validate your code (optional but useful): run it through the W3C validator to catch missing tags or attribute errors.