Cambridge Syllabus Notes

21. Website Authoring – Styles and Classes

Learning objectives

Identify the characteristics of inline, internal and external style sheets.
Explain the role of class and ID selectors and compare their specificity.
Use relative and absolute paths correctly when linking external files.
Apply common CSS properties for layout, typography, tables, images and responsive design.
Choose the most appropriate styling method for a given situation (maintainability, re‑usability, cascade order).

1. CSS – the presentation layer (syllabus 21.3)

Cascading Style Sheets (CSS) separate presentation from content. The cascade decides which rule wins when several rules apply to the same element.

1.1 Cascade hierarchy (highest → lowest priority)

Browser default stylesheet
External style sheets (linked in the <head>)
Internal style sheet (<style> block)
Inline style attribute (style="…")
!important declarations – override the normal cascade, but a later rule with a higher specificity and !important will still win.

1.1.1 Specificity – numeric calculation

Specificity is expressed as a three‑part number (a‑b‑c):

a – number of inline style attributes (0 or 1)
b – number of ID selectors
c – number of class, attribute or pseudo‑class selectors

Example:

/* selector */               /* specificity */
p { … }                       /* 0‑0‑1 */
.menu { … }                   /* 0‑0‑1 (class) → 0‑0‑1 */
#header { … }                 /* 0‑1‑0 */
#main .nav li.active { … }   /* 0‑1‑2 (1 ID + 2 classes) */
style="color:#c00;"           /* 1‑0‑0 (inline)

2. Types of style sheets

2.1 Inline style (single element)

<p style="color:#c00; font-weight:bold;">Important notice</p>

2.2 Internal style sheet (within the same HTML document)

<head>
    <style>
        .highlight { color:#c00; font-weight:bold; }
    </style>
</head>

2.3 External style sheet (separate `.css` file)

Linking the stylesheet (the same file must be linked from every HTML page you use in the exam):

<head>
    <link rel="stylesheet" href="css/styles.css">
</head>

Relative vs absolute paths

Relative path – starts from the current document’s folder. Example: href="css/styles.css"
Absolute path – full URL from the root of the web server or the Internet. Example: href="https://www.example.com/css/styles.css"

Exam tip: For Paper 3 you must use **relative paths** for locally stored files; absolute URLs are only allowed for external resources.

3. Selectors – class, ID and element

Selector type	Syntax	Typical use	Specificity (a‑b‑c)
Element selector	`p { … }`	Apply a rule to every occurrence of an element.	0‑0‑1
Class selector	`.menu { … }`	Reusable styling for a group of elements.	0‑0‑1 (or 0‑0‑n for n classes)
ID selector	`#header { … }`	Unique styling for a single element (must be unique on a page).	0‑1‑0
Inline style	`style="…"`	Quick, one‑off changes (e.g., email HTML).	1‑0‑0 (highest without `!important`)

3.1 Example – class vs ID

<!-- CSS (external or internal) -->
<style>
    .button { background:#006; color:#fff; padding:8px 12px; }
    #submitBtn { border:2px solid #000; }
</style>

<!-- HTML -->
<button class="button">Cancel</button>
<button id="submitBtn" class="button">Submit</button>

4. Reminder – HTML content layer (syllabus 21.2)

These are the elements you must be able to create in the exam. The right CSS properties are shown so you can link content and presentation quickly.

HTML element	Key CSS properties	Typical class / ID
`<h1>…</h1>`	font-family, font-size, color, margin‑bottom	`.page-title`
`<p>…</p>`	line-height, text-align, color	`.intro`
`<a href="">…</a>`	color, text-decoration, :hover colour	`#mainNav a`
`<img src="" alt="">`	border, max-width, display, float	`.align-right`
`<table>…</table>`	border-collapse, width, margin, background‑color for `th`	`.data-tbl`
`<form>…</form>`	margin, padding, display (grid/flex) for layout of controls	`.login-form`
`<video>…</video>`	width, height, border	`.media`

5. Common CSS properties (exam‑relevant)

Property	Purpose	Example value
`color`	Text colour	`#333` or `rgb(0,0,255)`
`background`	Background colour / image	`#f0f0f0` or `url('img/bg.jpg') no-repeat center/cover`
`font-family`	Font face	`Arial, sans-serif`
`font-size`	Size of text	`16px` or `1.2em`
`font-weight`	Boldness	`bold` or `700`
`line-height`	Space between lines	`1.5`
`text-align`	Horizontal alignment	`center`
`margin`	Space outside the element	`10px 0`
`padding`	Space inside the element	`5px 10px`
`border`	Border style	`1px solid #999`
`width / height`	Dimensions	`200px` or `100%`
`display`	Block, inline, inline‑block, flex, grid	`flex`
`float`	Float element left/right	`right`
`clear`	Control float behaviour	`both`
`list-style`	Bullets / numbers for lists	`disc inside`
`position`	static, relative, absolute, fixed, sticky	`relative`
`z-index`	Stacking order (used with positioned elements)	`10`

6. Responsive design – media queries

Media queries let you apply different styles depending on the device’s width, orientation, resolution, etc. They are often used to meet e‑safety requirements such as ensuring readable text on small screens.

@media screen and (max-width: 600px) {
    /* e‑safety: larger, high‑contrast text on mobiles */
    body { font-size:1.2rem; line-height:1.6; }
    .nav { flex-direction:column; }
    .hero { background-image:url('img/hero-mobile.jpg'); }
}

7. Naming conventions & maintainability

Use clear, descriptive class names (e.g., .btn-primary, .card-header).
Adopt a simple BEM‑style pattern: block__element--modifier. This makes it obvious which elements a rule targets and reduces accidental overrides.
Keep all layout‑related rules in the external stylesheet; reserve IDs for unique page sections (header, footer) when higher specificity is needed.

8. Quick checklist – which styling method to use?

Only one element needs the rule? – Use an inline style for a quick test, or a unique #id if the element may be referenced later.
Same styling required on many elements? – Define a class in an internal or external stylesheet.
Site has several pages (Paper 3)? – Keep the CSS in an external stylesheet and link it from every page.
Need to override another rule? – Use a selector with higher specificity or, sparingly, !important.
Creating a responsive layout? – Add @media queries in the external stylesheet.

9. Linking the same external stylesheet to multiple pages (Paper 3 requirement)

In the exam you will usually create at least two HTML files (e.g., index.html and about.html). Both must contain the same <link rel="stylesheet" href="css/styles.css"> line in the <head>. This demonstrates that a single stylesheet can control the appearance of an entire website.

10. Summary – differences at a glance

Aspect	Inline style	Class selector	ID selector	External stylesheet
Definition location	Inside the HTML tag	In a CSS rule set (`.class`)	In a CSS rule set (`#id`)	Separate `.css` file (or `<style>` block)
Re‑usability	Single element only	Multiple elements	One element per page	All pages that link the file
Specificity	Highest (1‑0‑0)	Low (0‑0‑1 per class)	Medium (0‑1‑0)	Depends on selector type (usually low)
Maintainability	Poor – edit each element	Good – edit class once	Good – edit ID once	Best – one file controls many pages
Typical exam use	Quick test, email HTML	Standard page styling (tables, navigation, forms)	Unique sections (header, footer) or when higher specificity is required	Final projects; mandatory for Paper 3 (multiple pages)

Decision flowchart (inline → class → ID → external) – choose the method that gives the required re‑usability and specificity while keeping the code maintainable.

Know and understand characteristics of a style and a class including the difference between them

21. Website Authoring – Styles and Classes

Learning objectives

1. CSS – the presentation layer (syllabus 21.3)

1.1 Cascade hierarchy (highest → lowest priority)

1.1.1 Specificity – numeric calculation

2. Types of style sheets

2.1 Inline style (single element)

2.2 Internal style sheet (within the same HTML document)

2.3 External style sheet (separate `.css` file)

3. Selectors – class, ID and element

3.1 Example – class vs ID

4. Reminder – HTML content layer (syllabus 21.2)

5. Common CSS properties (exam‑relevant)

6. Responsive design – media queries

7. Naming conventions & maintainability

8. Quick checklist – which styling method to use?

9. Linking the same external stylesheet to multiple pages (Paper 3 requirement)

10. Summary – differences at a glance

Support e-Consult Kenya

Know and understand characteristics of a style and a class including the difference between them

21. Website Authoring – Styles and Classes

Learning objectives

1. CSS – the presentation layer (syllabus 21.3)

1.1 Cascade hierarchy (highest → lowest priority)

1.1.1 Specificity – numeric calculation

2. Types of style sheets

2.1 Inline style (single element)

2.2 Internal style sheet (within the same HTML document)

2.3 External style sheet (separate .css file)

3. Selectors – class, ID and element

3.1 Example – class vs ID

4. Reminder – HTML content layer (syllabus 21.2)

5. Common CSS properties (exam‑relevant)

6. Responsive design – media queries

7. Naming conventions & maintainability

8. Quick checklist – which styling method to use?

9. Linking the same external stylesheet to multiple pages (Paper 3 requirement)

10. Summary – differences at a glance

Support e-Consult Kenya

1.1 Cascade hierarchy (highest → lowest priority)

2.3 External style sheet (separate `.css` file)

9. Linking the same external stylesheet to multiple pages (Paper 3 requirement)