Cambridge Syllabus Notes

21. Website Authoring – Applying Classes to Elements

Learning Objectives

Add one or more class attributes to any HTML element.
Write CSS class selectors and predict how they interact with the cascade.
Distinguish external, embedded and inline style sheets and explain why external sheets are preferred for the IGCSE exam.
Include the required <head> elements (meta‑tags, charset, viewport, title, external stylesheet) in a valid HTML5 document.
Apply classes for layout, visual design and simple interactive effects (e.g. :hover).
Calculate CSS specificity and decide which rule will win.
Use relative file paths and create page bookmarks.

1. Web‑authoring layers (syllabus 21.1)

Layer	Purpose	Typical tags / techniques
Content layer	Defines the structure and meaning of the page.	`<h1>…</h1>`, `<p>…</p>`, `<table>`, `<img>`, `<audio>`, `<video>`, `<a href="#">`, basic form elements (`<input>`, `<label>`).
Presentation layer	Controls how the content looks.	CSS (external, embedded, inline), class and ID selectors, pseudo‑classes.
Behaviour layer	Enables interactivity (not required for the IGCSE).	Presence of a `<script>` element is allowed, but no scripting is examined.

2. Required elements in the `<head>` (syllabus 21.2)

Only the three items below are mandatory for the exam. The others are useful in real‑world sites but are not examined.

Element	Typical syntax	Exam relevance
`<title>`	`<title>My Page</title>`	Required – appears in the browser tab and is checked by the examiner.
`<meta charset="UTF-8">`	`<meta charset="UTF-8">`	Required – ensures correct character display.
`<meta name="viewport" content="width=device-width, initial-scale=1">`	`<meta name="viewport" content="width=device-width, initial-scale=1">`	Required – makes the page responsive on mobile devices.
`<link rel="stylesheet" href="css/styles.css">`	`<link rel="stylesheet" href="css/styles.css">`	Required – links the external style sheet (exam‑friendly relative path).

Optional but useful meta‑tags (not examined): description, author. The keywords meta‑tag is deprecated in HTML5 and can be omitted.

Example `<head>` section

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Demonstrates CSS classes for IGCSE">
    <meta name="author" content="Your Name">
    <title>Class Example</title>
    <link rel="stylesheet" href="css/styles.css">
</head>

3. Where can CSS be placed?

Type	Syntax	When to use (exam)
External	`<link rel="stylesheet" href="styles.css">`	Preferred – separates content from presentation, reusable, demonstrates relative paths.
Embedded (internal)	`<style> … </style>` inside `<head>`	Useful for a single‑page demonstration; still separate from HTML markup.
Inline	`<p style="color:red;">…</p>`	Allowed but discouraged – mixes content with presentation and cannot be reused.

Why external style sheets are preferred

Separation of concerns – HTML stays pure content.
Re‑usability – one stylesheet can style many pages.
Maintainability – a single change updates the whole site.
Exam requirement – candidates must link an external file using a relative path.

4. Cascade hierarchy (simplified)

Cascade hierarchy: user‑agent → external → embedded → inline — Figure 1 – Simplified cascade hierarchy (higher layers override lower ones when specificity is equal).

5. Adding classes to HTML elements

Syntax

Place the class attribute inside the opening tag.
Assign one or more class names, separated by a single space.

Examples

<div class="highlight">Important text</div>
<p class="note warning">Check this warning</p>
<span class="bold italic red">Styled text</span>

Multiple classes on one element

Each class contributes its own declarations; the final appearance is the combination of all matching rules, resolved by the cascade.

Best‑practice naming conventions (Cambridge recommendation)

Rule	Example / Reason
Use lowercase letters	`menu-item`
Separate words with hyphens	Improves readability; avoid `_` or camelCase.
Be descriptive, not presentational	`error-message` (not `red-text`)
Avoid reserved words	Do not use `class`, `id`, `html`, etc.

6. CSS class selectors, the cascade and specificity

Class selector syntax

.highlight { background-color:#ff0; }
.note      { font-size:0.9em; }
.warning   { color:#c00; }

Specificity – three‑part value (a,b,c)

a = number of ID selectors.
b = number of class selectors, attribute selectors, or pseudo‑classes.
c = number of type selectors (elements) or pseudo‑elements.

Selector	Specificity	Explanation
`#header`	(1,0,0)	One ID selector.
`.nav-link`	(0,1,0)	One class selector.
`p`	(0,0,1)	One type selector.
`ul li.active:hover`	(0,2,2)	Two class/pseudo‑class selectors and two type selectors.

How conflicts are resolved

Importance – !important overrides normal rules (use sparingly).
Specificity – higher (a,b,c) wins.
Source order – if specificity is equal, the rule that appears later (or in a later‑linked stylesheet) wins.

Illustrative example

/* stylesheet1.css – linked first */
p { color:#555; }               /* (0,0,1) */
.highlight { color:#006; }      /* (0,1,0) */

/* stylesheet2.css – linked second */
.highlight { color:#c00; }      /* same specificity, later sheet wins */

All <p class="highlight"> elements will appear red because the second stylesheet overrides the first.

7. Using classes for layout, visual design & interaction

Text and box styling (common properties)

.title {
    font-family: Arial, sans-serif;
    color: #003366;
    margin-bottom: 1rem;
}
.intro {
    font-size: 1.1em;
    line-height: 1.5;
}
.highlight {
    background-color: #ffff99;
    padding: 0.3rem;
}

Table styling with a class

<table class="data-table">
    <tr><th>Item</th><th>Price</th></tr>
    <tr><td>Apple</td><td>$1</td></tr>
</table>

.data-table {
    border-collapse: collapse;
    width: 100%;
}
.data-table th,
.data-table td {
    border: 1px solid #999;
    padding: 0.5rem;
    text-align: left;
}
.data-table th {
    background-color: #f0f0f0;
}

Interactive pseudo‑class example

.nav-link {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    color: #333;
    text-decoration: none;
}
.nav-link:hover {
    background-color: #e0e0e0;
    color: #000;
}
.active {
    background-color: #003366;
    color: #fff;
}

8. Relative paths, absolute paths and bookmarks

Relative file paths (exam‑friendly)

Same folder: src="images/logo.png"
Sub‑folder: src="images/icons/home.svg"
Parent folder: href="../styles/main.css"

Absolute URLs (e.g. http://example.com/logo.png) should be avoided in exam questions because they break when the site is moved.

Creating a page bookmark

<a id="top"></a>               
...
<a href="#top">Back to top</a>

Bookmarks aid navigation and are part of the required hyperlink knowledge.

9. Common mistakes & how to avoid them

Forgetting the space between multiple class names (class="nav-linkactive").
Re‑using a class name for unrelated purposes – leads to unintended styling.
Misspelling class names in HTML or CSS (e.g., menu-item vs menu_item).
Relying on inline styles when the exam expects an external stylesheet.
Confusing relative and absolute paths – always test the page locally.
Assuming the first linked stylesheet always wins – remember that later sheets override earlier ones when specificity is equal.

10. Step‑by‑step example (external stylesheet)

Create the folder structure:
project/
└─ css/styles.css
└─ index.html
Write the HTML (index.html) – include the required <head> elements and link the external stylesheet.
Apply classes to elements (e.g., class="title", class="intro highlight").
Define the corresponding CSS rules in css/styles.css.
Open the page in a browser to verify appearance and interaction.

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Demonstrates CSS classes for IGCSE">
    <meta name="author" content="Your Name">
    <title>Class Example</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>

    <a id="top"></a>   <!-- bookmark destination -->

    <h1 class="title">Welcome to My Site</h1>
    <p class="intro highlight">This paragraph uses two classes.</p>

    <nav>
        <a href="#section1" class="nav-link">Section 1</a>
        <a href="#section2" class="nav-link active">Section 2</a>
        <a href="#section3" class="nav-link">Section 3</a>
    </nav>

    <section id="section1">
        <h2 class="subtitle">First Section</h2>
        <table class="data-table">
            <tr><th>Item</th><th>Price</th></tr>
            <tr><td>Apple</td><td>$1</td></tr>
        </table>
    </section>

    <!-- more sections … -->

    <p><a href="#top">Back to top</a></p>

</body>
</html>

CSS (css/styles.css)

/* 1. General page styling */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 1rem;
    line-height: 1.5;
}

/* 2. Text classes */
.title {
    color: #003366;
    margin-bottom: 1rem;
}
.intro {
    font-size: 1.1em;
}
.highlight {
    background-color: #ffff99;
    padding: 0.3rem;
}

/* 3. Navigation */
.nav-link {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    color: #333;
    text-decoration: none;
}
.nav-link:hover {
    background-color: #e0e0e0;
}
.active {
    background-color: #003366;
    color: #fff;
}

/* 4. Table styling */
.data-table {
    border-collapse: collapse;
    width: 100%;
    margin-top: 1rem;
}
.data-table th,
.data-table td {
    border: 1px solid #999;
    padding: 0.5rem;
    text-align: left;
}
.data-table th {
    background-color: #f0f0f0;
}

11. Behaviour layer note (optional)

Although the IGCSE does not assess JavaScript, the syllabus mentions the <script> element as part of the behaviour layer. In exam answers you may simply state that no scripting is required and that the <script> tag would be placed just before the closing </body> if it were needed.

Be able to apply classes to elements within a web page

21. Website Authoring – Applying Classes to Elements

Learning Objectives

1. Web‑authoring layers (syllabus 21.1)

2. Required elements in the `<head>` (syllabus 21.2)

Example `<head>` section

3. Where can CSS be placed?

Why external style sheets are preferred

4. Cascade hierarchy (simplified)

5. Adding classes to HTML elements

Syntax

Examples

Multiple classes on one element

Best‑practice naming conventions (Cambridge recommendation)

6. CSS class selectors, the cascade and specificity

Class selector syntax

Specificity – three‑part value (a,b,c)

How conflicts are resolved

Illustrative example

7. Using classes for layout, visual design & interaction

Text and box styling (common properties)

Table styling with a class

Interactive pseudo‑class example

8. Relative paths, absolute paths and bookmarks

Relative file paths (exam‑friendly)

Creating a page bookmark

9. Common mistakes & how to avoid them

10. Step‑by‑step example (external stylesheet)

HTML (index.html)

CSS (css/styles.css)

11. Behaviour layer note (optional)

Support e-Consult Kenya

Be able to apply classes to elements within a web page

21. Website Authoring – Applying Classes to Elements

Learning Objectives

1. Web‑authoring layers (syllabus 21.1)

2. Required elements in the <head> (syllabus 21.2)

Example <head> section

3. Where can CSS be placed?

Why external style sheets are preferred

4. Cascade hierarchy (simplified)

5. Adding classes to HTML elements

Syntax

Examples

Multiple classes on one element

Best‑practice naming conventions (Cambridge recommendation)

6. CSS class selectors, the cascade and specificity

Class selector syntax

Specificity – three‑part value (a,b,c)

How conflicts are resolved

Illustrative example

7. Using classes for layout, visual design & interaction

Text and box styling (common properties)

Table styling with a class

Interactive pseudo‑class example

8. Relative paths, absolute paths and bookmarks

Relative file paths (exam‑friendly)

Creating a page bookmark

9. Common mistakes & how to avoid them

10. Step‑by‑step example (external stylesheet)

HTML (index.html)

CSS (css/styles.css)

11. Behaviour layer note (optional)

Support e-Consult Kenya

1. Web‑authoring layers (syllabus 21.1)

2. Required elements in the `<head>` (syllabus 21.2)

Example `<head>` section