CSS : How to Link to an external stylesheet

This is a short post, but I believe it a useful one for anyone who is new to CSS and is learning how it works.

With one simple line of code located in the head of your page (per stylesheet), you can attach a single or multiple style sheets to your page. Combining this with includes in one form or another, including javascript (which I don’t suggest), php includes or asp SSI includes, you can apply your stylesheets to every page in your website – this allows for a consistent look and design within your site.

So how to attach a stylesheet? You’ll need to add this line of code anywhere between the:

<head>

</head>

You need to put:

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

The href needs to be relative to the path, so if your pages are in the root and you keep the css in a folder the href needs to be folder/stylesheet.css. If you are having trouble with this, try an absolute path to get it working. You can use as many stylesheets as you want, this can often be useful if you want a seperate one for a print style. Add into the link ‘rel’ a media tag of media=”print” and link it up with a @print in your stylesheet for that styles you want when printing – I will cover this in more detail in another tutorial.

Of course, once your stylesheet is linked, all your css class’s etc will work as if the css was in the page itself.

The pupose of linking to them is so you only need to update one css file to update all of the pages within your website. Handy when managing a large website.

I hope this is useful.

Alan

One Response to “CSS : How to Link to an external stylesheet”

Tom Freeman on 24 August, 2008

While fiddling around with my own blog, I found that the themes were hugely dependant on external style sheets. As a student in the school of CSS, it’s handy to have the nuts and bolts of pages scribbled down in plain English! Cheers!