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

Published by Patrick Mutisya · 14 days ago

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

AspectAbsolute PathRelative Path
DefinitionFull 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)
PortabilityLow – changes if domain or folder changesHigh – works as long as relative folder structure is preserved
Typical Use CasesLinking to external resources such as CDNs, APIs, or assets on another siteLinking to internal resources (stylesheets, scripts, images) within the same project
MaintenanceMore effort required when moving the siteLess 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 FileRelative Path to main.cssRelative Path to logo.png
index.htmlcss/main.cssassets/images/logo.png
about.htmlcss/main.cssassets/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.