Cambridge Syllabus Notes

21 Website Authoring

Objective: Save styles in a cascading stylesheet (CSS) 📄

What is CSS?
CSS (Cascading Style Sheets) is like a wardrobe for your website. It tells the browser how to dress each part of the page – colours, fonts, spacing, and more – so you can keep the design tidy and consistent.

How to create a separate CSS file 🖌️

Create a new file in your project folder and name it styles.css.
Write your CSS rules inside this file. Example:

/* styles.css */
body {
  background-color: #f0f8ff;
  font-family: 'Arial', sans-serif;
}
h1 {
  color: #2c3e50;
}

Exam Tip: Remember to use the <link> tag inside the <head> section to connect your CSS file to the HTML page. The path must be correct, otherwise the styles won’t load.

Linking CSS to HTML 🔗

Place this line inside the <head> of your HTML file:

Analogy: Think of the <link> tag as a mailman delivering your wardrobe (CSS) to the house (HTML). If the mailman gets lost, the house stays plain.

Cascading and Specificity 🎯

CSS rules “cascade” – the later rules can override earlier ones if they target the same element. Specificity decides which rule wins.

Selector	Specificity	Example
p	0,0,0,1	p { color: blue; }
.intro	0,0,1,0	.intro { color: green; }
#main-title	0,1,0,0	#main-title { color: red; }

Exam Tip: When writing CSS, start with the most general selectors (e.g., body) and move to more specific ones (e.g., #header). This helps avoid unintended overrides.

Testing and Debugging 🐛

Use the browser’s developer tools (right‑click → Inspect) to see which CSS rules are applied and why some are ignored. Look for:

Typos in selector names.
Missing semicolons at the end of a rule.
Incorrect file path in the <link> tag.

Analogy: Think of debugging as detective work. The browser’s console is your magnifying glass, showing you clues (errors) that help you solve the mystery of why a style isn’t showing up.

Final Checklist ??

All CSS rules are in styles.css.
The <link> tag correctly points to styles.css.
No syntax errors (missing braces, semicolons, etc.).
Specificity is considered to avoid unwanted overrides.
Test the page in at least two browsers (Chrome, Firefox).

Exam Tip: In the exam, you may be asked to write a CSS rule that changes the font colour of all <h2> elements to blue. Remember the syntax: h2 { color: blue; }.

Be able to save styles in cascading stylesheet format