HTML - Understanding href and the link and base tags

Question

I often get confused with the href attribute, the link tag, and the base tag. I'm unsure how to properly link the CSS file so a file can be moved into a subfolder and still work (example later on) so I went ahead and found out how the href works when specifying a location.

For your knowledge, I'm working with my localhost, so I have the main htdocs folder and inside that, I have multiple folders, each for a project I'm working on. It ends up looking like this:

localhost/index.php (which redirects to localhost/home/index.php)
localhost/home/
localhost/zune/
localhost/school/
localhost/aeac/

And generally the layout of a folder will be something along these lines:

localhost/aeac/images/
localhost/aeac/stylesheets/
localhost/aeac/scripts/

Going on, let's say I have the file localhost/aeac/test/index.html and in it, I have 4 links for testing. I've found out that

<a href="/"> will link to "localhost/"
<a href="./"> will link to "localhost/aeac/test/" (the directory the file is in.)
<a href="../"> will link to "localhost/aeac/" (the directory above the file.)
<a href="about.html">will link to "localhost/aeac/test/about.html" (the directory the file is in.)

Now that I understand href's, I need to understand how to link CSS properly.

Imagine the site's directory looks like this:

localhost/aeac/
localhost/aeac/images/
localhost/aeac/stylesheets/
localhost/aeac/scripts/

and right in the /aeac/ folder I have index.html. The file has a link tag that looks like this:

<link rel="stylesheet" href="stylesheets/main.css" />

So that works out well, main is basically the site's structure/theme and gets included in every file. The problem occurs when I have to make a subfolder. Now we have a localhost/aeac/users/*username*/index.html. The site still uses the main.css, but the link doesn't work anymore because there is no stylesheets folder inside there.

That's where I'm stuck, I imagine that I should be using the base tag to solve my problem but I'm still confused on how that would written. Also, I know I could just change the link tag for all the files in the users folder, but I'd like to know how to do it this way (if that's even possible.)

Answer 1

I believe you want this:

<link rel="stylesheet" href="/aeac/stylesheets/main.css" />

This begins with /, so it will always traverse up from the root, not matter where your page is located (i.e. at /aeac/index.html or at /aeac/users/foo/index.html). Now, if you have control over the tag in each copy of index.html (which you probably do), you could also navigate upwards with .., to ../../stylesheets/main.css, but navigating from the root is probably simpler.

Answer 2

with what you found out about href, just combine that knowledge about navigation with your final approach:

So if you have this:
localhost/aeac/
localhost/aeac/images/
localhost/aeac/stylesheets/
localhost/aeac/scripts/
localhost/aeac/users/

and you are in localhost/aeac/users/index.html you just go one directory up (../ to get into aeac) and then navigate on:

../stylesheets/style.css

Hope this helps

Answer 3

You can have an absolute path to the stylesheet using / as the base

<link rel="stylesheet" href="/aeac/stylesheets/main.css" />

Answer 4

You can use: /stylesheet/main.css

or ../../stylesheet/main.css

No matter what the "user" folder is named, ../.. will always go 2 folders back:

/aeac/users/user1/index.html /aeac/users/user2/index.html

../../stylesheet will always get to /aeac/stylesheet