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

Resources → Subject Notes → Information Communication Technology ICT → Lesson Plan
ICT 0417 – Website Authoring: Relative File Paths for Stylesheets

21 Website Authoring

Objective

Know and understand why relative file paths must be used for attached stylesheets.

Why Use Relative Paths?

  • Ensures that the website works correctly when moved to a different server or directory.
  • Reduces the risk of broken links caused by changes in domain name or folder structure.
  • Facilitates collaborative development where team members may have different local folder arrangements.
  • Improves page‑load speed by avoiding unnecessary DNS look‑ups for absolute URLs.

Absolute vs. Relative Paths

Aspect Absolute Path Relative Path
Definition Full URL including protocol and domain (e.g., https://www.example.com/css/style.css) Path expressed from the location of the HTML file (e.g., css/style.css or ../styles/main.css)
Portability Low – changes if domain or folder changes High – works as long as relative folder structure is preserved
Typical Use Cases Linking to external resources such as CDNs, APIs, or assets on another site Linking to internal resources (stylesheets, scripts, images) within the same project
Maintenance More effort required when moving the site Less effort – only folder hierarchy matters

How to Write a Relative Path for a Stylesheet

  1. Identify the location of the HTML file that will attach the stylesheet.
  2. Identify the location of the CSS file relative to that HTML file.
  3. Choose the appropriate notation:
    • css/style.css – when the CSS folder is a sub‑folder of the HTML file’s folder.
    • ../css/style.css – when the CSS folder is one level up.
    • ../../assets/css/style.css – when you need to go up two levels then down into a different branch.
  4. Insert the <link> element inside the <head> of the HTML document: 
    <link rel="stylesheet" href="css/style.css">
  5. Test the page locally and after uploading to the server to confirm the stylesheet loads correctly.

Common Mistakes and How to Avoid Them

  • Using a leading slash (e.g., /css/style.css) – this makes the path absolute to the root of the domain, breaking portability.
  • Mixing forward and backward slashes – always use forward slashes (/) in URLs.
  • Incorrect number of “..” – count the directory levels carefully; each “..” moves one level up.
  • Case sensitivity – on many servers (e.g., Linux) file names are case‑sensitive; match the exact case.

Practical Example

Folder structure:

project/
│
├─ index.html
├─ about.html
├─ css/
│   └─ main.css
├─ pages/
│   ├─ contact.html
│   └─ services.html
└─ assets/
    └─ images/
        └─ logo.png

Relative paths for each HTML file:

HTML File Relative Path to main.css Relative Path to logo.png
index.html css/main.css assets/images/logo.png
about.html css/main.css assets/images/logo.png
pages/contact.html ../css/main.css ../assets/images/logo.png
pages/services.html ../css/main.css ../assets/images/logo.png
Suggested diagram: Folder hierarchy showing relative navigation from each HTML file to the CSS file.

Key Take‑aways

  • Relative paths keep your website flexible and portable.
  • Always base the path on the location of the HTML file, not on the server root.
  • Test after any change to folder structure or after uploading to a new server.
  • Document your folder layout so future developers can quickly determine the correct relative paths.