How do I link a CSS file in a different folder?
The title of this post is almost the exact thing I just searched for on the internet. The number of pages in my website is getting unwieldy, so I created a folder to store a bunch of pages of a certain type to keep my root folder from getting too crowded. I discovered after I did this that my pages in the new folder weren’t able to access the CSS Stylesheet. Major bummer.
After a quick search on the web, I discovered the following trick:
In every folder, there is a secret folder called: .. That’s right, .. is hiding and waiting to help you ‘jump up’ to the next highest folder level. When your website file directory starts looking something like this:
.. can help you out. It’s nice like that.
So you’ve got some HTML files hanging out in a subdirectory while your CSS style sheet is sitting in your root directory. The way you get (in this example) week1.html and week2.html in the subfolder to link to your CSS file in the top level is to ADD the .. folder, separated by a / (forward slash) from the name of the file or folder you’re trying to access from the directory above, to href in your link element, like so:
<link href=”kills.css” rel=”stylesheet” type=”text/css” />
<link href=”../kills.css” rel=”stylesheet” type=”text/css” />
If your file is in a subdirectory and you want to access a file in a different subdirectory off the main folder, you can jump up using the .. folder and then jump back down a different chain of folders, like ../css/example.css, in a case where you keep all of your css sheets in a single folder.
hmm… Now that sounds like a good idea.
Brought to you by the letter D, and internet searches.