Linking HTML and CSS that are in different folders

Question

I have the following folders structure: one SITE folder and inside of it i have a HTML folder (where lies my index.html file) and a CSS folder (where lies my main.css file).

What's the right way to link my css file to my index.html? I've tried some relative paths, but i haven't got it right yet.

Answer 1

It looks like this is what you need:

SITE
|
+--- HTML
|    |
|    +--- index.html
+--- CSS
     |
     +--- main.css

---

<link rel="stylesheet" type="text/css" href="../CSS/main.css">

First you navigate out of your current folder ("..") and then into your CSS folder.

Answer 2

If you have:

• Your Site folder
  • HTML
  • CSS

You should be able to do the following within the HEAD section: <link rel="stylesheet" href="../CSS/main.css">

This goes up one folder from the HTML file to the root folder, then selects the CSS folder followed by the main.css file

A great resource is https://www.w3schools.com/html/html_css.asp

Hope this makes sense