Linking to external files in web development

This one seems to trip people up quite a lot, especially when linking to js files or extrernal stylesheets, but it’s actually quite simple once you get your head around it.

Let’s say you have a page, ‘index.html’ that is linking to an external stylesheet (‘style.css’) which is contained in the same folder.

references-simple

Linking your file in this case is so simple you probably already do it:-

<link href="style.css" />

Because the css file is at the same level as the one requesting it, nothing more complicated is needed.  Simple so far?

Ok, now let’s say you have a separate directory in your folder structure where you want to keep your external files, such as ‘styles’, seen below:-

references-1

In this case you need to change the link so that it points to the correct file and in the correct folder.  Your link would look like this:-

<link href="styles/style.css" />

As you can see we’ve specified the folder name and the file, making sure that we use a forward slash (/) to separate the folder name from the file name.  With me so far?

Ok, now here’s a more complicated  scenario.  In this scenario, the page we are looking at ‘index.html’ is inside another folder, but the stylesheet we want to use is in a parent, or containing folder instead:-

references-1a

Neither of the solutions we’ve used so far will get us anywhere.  Instead, we have to tell the html to move up a folder and then link to the file.  We do that by using two dots, like this ‘..’

So, in this case, we would link to our stylesheet like this:-

<link href="../style.css" />

What this is telling the browser is that the stylesheet is a folder up from where we are.

Now, finally, let’s look at a more complicated example, where the stylesheet is in a completely different folder from the html.

references-2

So, how you you think we get to our stylesheet?  The best way of figuring this out is to work out how we would tell the html where the css is located, and translate that into the correct notation:-

So, we need to move up a folder (../), and then select the styles folder (styles/) followed by the stylesheet file we want to link to (style.css).

Putting this all together will look like this:-

<link href="../styles/style.css" />

And the link should work perfectly.

This method of using ‘relative’ references to files in html is not only useful for linking to css files, you can use it for any resource that is linked to in your html, from js files, to images and more.  You can even use the same relative referencing for links to other pages in your website.  If you can get it around your head how this stuff works, it will make your life much easier.

One thing worth mentioning should be commonsense to you.  If you move any of the files you are linking to, then the hard-coded relative references will break, so make sure you always update the location in your html as well when you start moving files around.  Some IDEs do this for you automatically, but don’t take this for granted.

Leave a Reply

Your email address will not be published. Required fields are marked *