Be able to apply classes to elements within a web page

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)

LayerPurposeTypical tags / techniques
Content layerDefines the structure and meaning of the page.

<h1>…</h1>, <p>…</p>, <table>, <img>, <audio>, <video>, <a href="#">, basic form elements (<input>, <label>).

Presentation layerControls how the content looks.CSS (external, embedded, inline), class and ID selectors, pseudo‑classes.
Behaviour layerEnables 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.

ElementTypical syntaxExam 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?

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

RuleExample / Reason
Use lowercase lettersmenu-item
Separate words with hyphensImproves readability; avoid _ or camelCase.
Be descriptive, not presentationalerror-message (not red-text)
Avoid reserved wordsDo 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.

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

  1. Importance – !important overrides normal rules (use sparingly).

  2. Specificity – higher (a,b,c) wins.

  3. 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)

  1. Create the folder structure:

    project/

      └─ css/styles.css

      └─ index.html

  2. Write the HTML (index.html) – include the required <head> elements and link the external stylesheet.

  3. Apply classes to elements (e.g., class="title", class="intro highlight").

  4. Define the corresponding CSS rules in css/styles.css.

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