Cambridge Syllabus Notes

📚 21 Website Authoring – Relative File Paths for Stylesheets

📝 What is a Stylesheet?

A stylesheet (CSS) tells the browser how to display your webpage. It’s like a set of instructions for a designer, deciding colours, fonts, layout and more.

🔗 Why Use Relative Paths?

When you link a stylesheet, the browser needs to know where the file is. A relative path tells the browser to look in the same folder or a sub‑folder relative to the current page. This keeps your site portable – you can move the whole folder to a new server or domain without breaking links.

📁 Absolute vs Relative Paths

Absolute path: /styles/main.css – always points to the same location on the server.
Relative path (same folder): styles/main.css – points to a file in the same folder.
Relative with subfolder: ../assets/css/main.css – goes up one folder then into assets/css.

Path Type	When to Use	Example
Absolute	When the file is on the same server and you want a fixed location.	/css/style.css
Relative (same folder)	When the stylesheet is in the same folder as the HTML file.	css/style.css
Relative (parent folder)	When the stylesheet is one level up.	../css/style.css

?? Best Practices for Relative Paths

Keep your folder structure tidy: index.html in root, css/ for stylesheets.
Use relative paths in link tags so the site works when moved to another domain.
Test the link by opening the page locally and checking the console for 404 errors.
Remember that ../ moves up one folder, ./ stays in the current folder.
Use consistent naming: style.css, layout.css, etc.

🏠 Analogy: The House & Paintbrush

Imagine your website is a house. Your index.html is a room. The CSS file is a paintbrush that tells the room how to look. If you say the paintbrush is in the next room (relative path), the house can find it no matter where the house is located. If you say the paintbrush is at 123 Main St. (absolute path), the house only works if the paintbrush is actually there.

📐 Quick Math: Path Calculation

If your current page is at /pages/about.html and your CSS is at /css/style.css, the relative path is ../css/style.css. In math terms:

$$\text{relative\_path} = \text{current\_folder} + \text{../} + \text{css/style.css}$$

🚀 Quick Checklist

?? Use link rel="stylesheet" with href="css/style.css".
?? Keep CSS in a css/ folder.
?? Test locally before uploading.
?? Avoid hard‑coding absolute URLs unless necessary.

Know and understand the reason relative file paths must be used for attached stylesheets