1

I was looking at relative linking (in regards to css and js) and was wondering about following: I have a page http://example.com/my-page and would like to load my external sheets, located at http://example.com/css/index.css, like so:

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

but this looks for the sheet at http://example.com/my-page/css/index.css Is there a way to use relative linking in this case or should I be using an absolute path?

2
  • 1
    Is "my-page" a file or a directory? If it's a directory (it sounds like it is) and the actual web page is something like "example.com/my-page/index.html", then you should be able to do a relative directory like "../css/index.css", assuming the permissions are right. If the actual web page is something like "example.com/my-page.html", then the relative links you listed should work. But, to me, every indication in your question is that my-page is a directory, so the links have to be adjusted to be relative to that directory. Of course, you can always use an absolute path.
    – Cliff B
    Oct 4 '16 at 11:28
  • your right, it's example.com/my-page/index.html
    – Vincent
    Oct 4 '16 at 11:33
1

@CliffB nailed it in the comments. If your css directory is located in the parent directory of my-page, the correct way to use a relative path would be to prepend ../ before your path.

This could be repeated as necessary: if the HTML source file is located at example.com/foo/bar/baz/index.html and you want to link to example.com/css/styles.css, you could use a relative link like ../../../css/styles.css.

At a certain point, it may be more concise to use an absolute path, but then you'd lose some of the flexibility of relative paths.

Hope this helps!

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .