How to handle CSS unable to load resource error

Question

I have been trying to arrange my html files for my website in different folders to make them more structured. The main CSS folder is in the same location as index.html file. However, when I try to access the CSS files from the HTML files inside the newly created folders using href="css/style.css" I kept getting the error "unable to load resource". I tried giving the full path but to no avail. So, I copied the CSS folder and pasted it inside the new folders and they are working. But, now I have to do this to all the folders.

Is there anyway in which I can avoid duplicating CSS files across all folders and access them from their original location?

Answer 1

You need the magic of ../.

In relative file paths, ../ means move one level out of current folder.

Take this example file structure:

    [root]
     |- index.html
     |
     |- [css]
     |   |- style.css
     |
     |- [animals]
     |   |- bird.html
     |   |- cat.html
     |   |
     |   |- [dogs]
     |   |   |- dog1.html
     |   |   |- dog2.html
     |
     |- [food]
     |   |- apple.html
     |   |- banana.html

The relative path to style.css from the following files would be:

• index.html:

  css/style.css

---

• bird.html:

  ../css/style.css

---

• dog1.html:

  ../../css/style.css

---

• apple.html:

  ../css/style.css

Answer 2

Your href="css/style.css" will try to read FROM that point, wherever your file calling it is located. So, it must be directly up the tree from there. A good safe way to handle this is simply using href="/css/style.css", which will force it to start searching from the root.

Trying to put in the entire path won't work because then it's trying to read the whole path from where you are. Which would also be incorrect.

Whatever is your structure, you are simply not pointing to the right spot in the tree.

Answer 3

The css file must load in html file - probably you write wrong folder. If you create new folder inside a folder look that from place where specified html file resides, for example /home/root/subsite/file.html you must set in that file a relative path to css folder. for example if css resides in /home/root/css/style.css then the relative path in html file would be "../css/style.css" There must be a good path for it.

Another reason can be no read permissions for folder with css. another thing may be backslash instead of slash.