By the end of this lesson you should be able to:
background shorthand.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"> <!-- mandatory – defines character set -->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- mandatory for responsive design -->
<meta name="description" content="Brief description of the page"> <!-- useful for SEO -->
<meta name="keywords" content="keyword1, keyword2, keyword3"> <!-- optional – may be omitted without penalty -->
<meta name="author" content="Your Name"> <!-- optional – identifies creator -->
<title>My Web Page</title>
<link rel="stylesheet" href="css/style.css"> <!-- relative path to external CSS file -->
</head>
<body>
…content goes here…
</body>
</html>
Purpose of each tag
| Tag | Purpose |
|---|---|
| <!DOCTYPE html> | Declares the document as HTML 5. |
| <html lang="en"> | Root element; lang helps screen‑readers and search engines. |
| <meta charset="utf-8"> | Specifies character encoding (required for all IGCSE pages). |
| <meta name="viewport"> | Ensures the page scales correctly on mobile devices. |
| <meta name="description"> | Short summary shown in search‑engine results. |
| <meta name="keywords"> | List of relevant keywords – optional for the exam. |
| <meta name="author"> | Identifies the creator of the page (optional). |
| <title> | Text shown in the browser tab and used by search engines. |
| <link rel="stylesheet"> | Links an external CSS file (use a relative path). |
| Element | Typical Use | Key Attributes |
|---|---|---|
| <h1>–<h6> | Headings – structure content. | none (semantic hierarchy matters). |
| <p> | Paragraph of text. | none. |
| <ul> / <ol> | Unordered / ordered lists. | none; use <li> for each item. |
| <img> | Insert an image. | src, alt, width, height. |
| <a> | Hyperlink. | href, target="_blank" (optional), title (optional). |
| <video> | Embed video. | src or nested <source>, controls, width, height. |
| <audio> | Embed audio. | src or nested <source>, controls. |
| <table> | Tabular data. | border (optional), summary or <caption> for accessibility. |
| <form> | Collect user input. | action, method (GET/POST). |
| <div> | Block‑level container – used for layout and to apply classes. | class or id. |
| <span> | Inline container – used for small style changes. | class or id. |
<div class="container">
<h1>Welcome</h1>
<p>This paragraph is inside a centred container.</p>
</div>
/* CSS */
.container {
width: 80%;
margin: 0 auto; /* centre horizontally */
padding: 20px;
background-color: #fafafa;
}
Place the following inside the <head> of every page that shares the same styling. Use a relative path (e.g., href="css/style.css") – absolute URLs are not permitted for local exam files.
<link rel="stylesheet" href="css/style.css">
style="…") – highest priority.<style>…</style>).style.css).color and font-family are passed from parent to child unless overridden.If two rules have the same specificity, the one that appears later in the CSS file wins.
| Selector | Example | When to use |
|---|---|---|
| Element selector | p { … } | Apply to all paragraphs. |
| Class selector | .highlight { … } | Reuse a style on many elements. |
| ID selector | #mainHeader { … } | Unique element – e.g., page header. |
| Descendant selector | nav a { … } | Target links inside a <nav> only. |
| Group selector | h1, h2, h3 { … } | Apply the same rules to several elements. |
Written directly inside an HTML tag. They have the highest cascade priority and therefore override any external or internal CSS rules.
<p style="color:#003366; font-size:14px; background-image:url('bg.jpg');">Sample text</p>
background-color – solid colour (named, hex, rgb, hsl).background-image – url('path/to/image.jpg').background-repeat – repeat, no-repeat, repeat-x, repeat-y.background-position – e.g., center top, 50% 50%.background-size – cover, contain, or explicit dimensions.background: #fff url('bg.png') no-repeat right bottom / cover;<div class="hero">
<h1>Welcome to My Site</h1>
</div>
/* CSS */
.hero {
height: 250px;
background: #004080 url('images/hero.jpg') no-repeat center / cover;
color: #ffffff;
display: flex;
align-items: center; /* vertical centre */
justify-content: center; /* horizontal centre */
}
font-family – list of typefaces, ending with a generic family (sans-serif, serif, monospace).font-size – px, em, % (relative to parent).font-weight – normal, bold, or numeric 100‑900.font-style – normal, italic, oblique.color – text colour.text-align – left, right, center, justify.line-height – controls vertical spacing of lines.| CSS Property | Typical Value | Exam Command Word |
|---|---|---|
| font-family | Arial, Helvetica, sans-serif | Set the font‑family to … |
| font-size | 16px (or 1.2em) | Set the font‑size to … |
| font-weight | bold | Make the text bold |
| font-style | italic | Make the text italic |
| color | #333333 | Set the text colour to … |
| text-align | center | Align the text centre‑aligned |
| line-height | 1.5 | Set the line‑height to … |
border – shorthand for border-width border-style border-color.border-collapse – collapse (single line between adjoining cells) or separate (default).border-spacing – horizontal & vertical gap when border-collapse: separate.padding – inner space of a cell.margin – space outside the table.width / height – dimensions of table, rows, columns, or cells.text-align – horizontal alignment inside a cell.vertical-align – top, middle, bottom, baseline.background-color – cell, row, or header colour.background-image – optional image background for cells./* ==== General page styles ==== */
body {
background-color: #f9f9f9;
font-family: Arial, Helvetica, sans-serif;
color: #333333;
margin: 0;
padding: 0;
}
/* ==== Layout helper ==== */
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
}
/* ==== Table styles ==== */
table {
width: 80%; /* overall width */
border-collapse: collapse; /* single line borders */
margin: 20px auto; /* centre with vertical space */
}
/* Header cells */
th {
background-color: #006699;
color: #ffffff;
font-weight: bold;
padding: 10px;
text-align: center; /* horizontal centre */
vertical-align: middle; /* vertical centre */
}
/* Data cells */
td {
border: 1px solid #999999;
padding: 8px;
text-align: left;
}
/* Zebra striping – alternate rows */
tr:nth-child(even) td {
background-color: #e6f2ff;
}
/* Invisible border – occupies space but not visible */
.invisible-border {
border: 2px solid transparent;
}
/* Responsive table – shrink on small screens */
@media (max-width: 600px) {
table { width: 100%; }
}
<table style="border:3px dashed #990000; border-collapse:separate; border-spacing:12px;">
<tr>
<th style="background-color:#990000; color:#ffffff; padding:10px;">Item</th>
<th style="background-color:#990000; color:#ffffff; padding:10px;">Price</th>
</tr>
<tr>
<td style="border:1px solid #cccccc; padding:8px; text-align:left;">Notebook</td>
<td style="border:1px solid #cccccc; padding:8px; text-align:right;">$2.50</td>
</tr>
</table>
For better accessibility, always include a <caption> or a summary attribute (if using XHTML) that describes the purpose of the table. Example:
<table summary="Price list for school stationery">
<caption>Stationery Price List</caption>
…
</table>
| Property | Applies To | Typical Value | Effect |
|---|---|---|---|
| border | table, th, td | 2px solid #333333 | Visible solid line of given thickness and colour. |
| border-collapse | table | collapse | Removes double borders; cells share a single line. |
| border-spacing | table | 12px 6px | Horizontal and vertical gaps when borders are separate. |
| padding | th, td | 8px | Space inside each cell between content and border. |
| background-color | th, td, tr | #006699 (th) / #e6f2ff (even rows) | Cell or row background colour. |
| color | th, td | #ffffff (th) | Text colour. |
| text-align | th, td | center / left / right | Horizontal alignment of text. |
| vertical-align | th, td | middle | Vertical alignment within the cell. |
| width / height | table, th, td | 80% (table) / 120px (th) | Controls the dimensions of the element. |
For the IGCSE, any interactive behaviour must be achieved with HTML attributes such as:
target="_blank" – open a link in a new tab/window.download – prompt a file download.autoplay, controls – for <audio> and <video>.required, placeholder – for form fields.Remember: No JavaScript is required or permitted for the IGCSE – behaviour is limited to the attributes listed above.
+-------------------+ +-------------------+ +-------------------+
| Content Layer | ---> | Presentation Layer| ---> | Behaviour Layer |
| (HTML) | | (CSS) | | (HTML attributes) |
+-------------------+ +-------------------+ +-------------------+
This diagram shows how HTML provides the structure, CSS adds the visual styling, and HTML attributes supply the limited interactive behaviour required for the exam.