September 16, 2008, 06:20:50 PM
A quick tutorial for y'all on using an external stylesheet rather than including it inline.
First, why?The biggest reason for me is that it's much, much easier to maintain if your CSS is in a single file. Let's say you have 20 pages on your site and are using CSS to style the pages. If you want to change one style with the styles in the HTML then you'll have to change it on all 20 pages. If it's in an external file you only have to change it once.
Speed is also an issue, although with broadband connections not as big of one. Let's say your pages each have 2k of CSS. Each page load requires that 2k to be sent to the client computer. If you put that 2k of stuff in an external file and link it'll only be downloaded once and pulled from the client's cache for every other page view.
That caching also helps keep your bandwidth down. This month this site has sent 30 megs worth of CSS files. Not much compared to the 950mb total, but still something to consider. But this is a relatively little viewed site compared to some of the bigger sites out there. Plus, a majority of the bandwidth here goes to image files. But it's still something to think about.
So how?Let's say you have the following code in between the <head> and </head> tags in your page.
<style type="text/css">
a {
text-decoration: none;
color: red;
}
a:hover {
text-decoration: underline;
color: blue;
}
</style>
What you're going to do is take everything between <style type="text/css"> and </style> and put it in a normal text file ending in .css. We'll call it style.css for now, but it can really be pretty much any name.
So your style.css will look like this.
a {
text-decoration: none;
color: red;
}
a:hover {
text-decoration: underline;
color: blue;
}
Take that file and upload it to your site.
Now open up your HTML page and take out starting at <style and ending with </style>. In between the <head> and </head> add the following.
<link rel="stylesheet" type="text/css" href="/path/to/style.css">
And it's linked. Now if you have 20 pages all linking to this CSS file and you decide you want your links to be purple instead of red it just has to be changed in one place.
Logged
