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 – Styles and Tables (IGCSE 0417)

Learning Objectives

By the end of this lesson you should be able to:

  • Write a complete HTML 5 skeleton and explain the purpose of each meta‑tag (including which tags are mandatory and which are optional).

  • Link an external stylesheet using a relative file path and describe the cascade order and specificity rules.

  • Apply inline style attributes and understand why they override external CSS.

  • Use background properties (colour, image, repeat, position, size) both individually and via the background shorthand.

  • Control font properties (family, size, weight, style, colour, alignment) and recognise the exam‑style command words associated with each.

  • Style tables, rows, header cells and data cells – width, height, background colour, horizontal & vertical alignment, spacing, padding and borders (including collapsed borders, colour, thickness, visible/invisible).

  • Recall that no JavaScript is required for the IGCSE – any interactive behaviour is achieved with HTML attributes only.

1. Content Layer – Essential HTML

1.1 Minimum HTML 5 Skeleton

<!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

TagPurpose
<!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).

1.2 Common HTML Elements (quick reference)

ElementTypical UseKey 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.

1.3 Layout Example – Applying a Class

<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;
}

2. Presentation Layer – CSS Basics

2.1 Linking an External Style Sheet

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">

2.2 Cascade, Inheritance & Specificity

  • Cascade order (high → low priority)

    1. Inline style attribute (style="…") – highest priority.

    2. Internal style block (<style>…</style>).

    3. External style sheet (style.css).

    4. Browser default stylesheet.

  • Inheritance: Properties such as color and font-family are passed from parent to child unless overridden.

  • Specificity hierarchy (higher value wins):

    • Inline style – 1,0,0,0

    • ID selector – 0,1,0,0

    • Class, attribute, pseudo‑class – 0,0,1,0

    • Element and pseudo‑element – 0,0,0,1

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

2.3 Common Selector Types

SelectorExampleWhen to use
Element selectorp { … }Apply to all paragraphs.
Class selector.highlight { … }Reuse a style on many elements.
ID selector#mainHeader { … }Unique element – e.g., page header.
Descendant selectornav a { … }Target links inside a <nav> only.
Group selectorh1, h2, h3 { … }Apply the same rules to several elements.

2.4 Inline Style Attributes

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>

3. Background Properties

  • 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.

  • Shorthand: background: #fff url('bg.png') no-repeat right bottom / cover;

3.1 Practical Example – Full‑Width Background Image

<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 */
}

4. Font Properties

  • 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.

4.1 Font Property Table with Exam Command Words

CSS PropertyTypical ValueExam Command Word
font-familyArial, Helvetica, sans-serifSet the font‑family to …
font-size16px (or 1.2em)Set the font‑size to …
font-weightboldMake the text bold
font-styleitalicMake the text italic
color#333333Set the text colour to …
text-aligncenterAlign the text centre‑aligned
line-height1.5Set the line‑height to …

5. Table Styling – Full Coverage

5.1 Key Table‑Related CSS Properties

  • 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.

5.2 Example External Style Sheet (css/style.css)

/* ==== 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%; }
}

5.3 Inline Table Styling (when a single table needs a unique look)

<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>

5.4 Accessibility Note for Tables

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>

5.5 Summary Table – What Each Property Does

PropertyApplies ToTypical ValueEffect
bordertable, th, td2px solid #333333Visible solid line of given thickness and colour.
border-collapsetablecollapseRemoves double borders; cells share a single line.
border-spacingtable12px 6pxHorizontal and vertical gaps when borders are separate.
paddingth, td8pxSpace inside each cell between content and border.
background-colorth, td, tr#006699 (th) / #e6f2ff (even rows)Cell or row background colour.
colorth, td#ffffff (th)Text colour.
text-alignth, tdcenter / left / rightHorizontal alignment of text.
vertical-alignth, tdmiddleVertical alignment within the cell.
width / heighttable, th, td80% (table) / 120px (th)Controls the dimensions of the element.

6. Behaviour Layer – HTML Attributes Only (No JavaScript)

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.

7. Visual Overview – The Three Development Layers

+-------------------+      +-------------------+      +-------------------+
|   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.