External Style Sheets
Why External Style Sheets Are Better than Embedded Styles
An external style sheet provides a location in which you can place styles that can be applied on all of your web pages. This is where the true power of CSS lies, and it’s for this reason that we haven’t spent too much time applying inline styles or embedded styles to our diving club project site.
The Bad Old Days
In the past, or The Bad Old Days as we’ll call them, people would create web sites on a page-by-page basis, and style them on a page-by-page basis using all manner of nasty elements of which I dare not even speak! Sometimes, these sites grew beyond the webmaster’s wildest imagination. “Fantastic,” thought Mr or Mrs Webmaster. “My web site now has over 200 pages! Soon I’ll be bigger than Microsoft.” A few months later, the webmaster decided to redesign the web site and realized, with considerable horror, that he or she would have to alter each and every single web page in order to redesign the site in a consistent manner. Every page needed 20 or more different tweaks, and each tweak had to be applied consistently to every page of the site. Inevitably, some pages were missed and eventually the redesign plan was unceremoniously dropped. In short, the ugly web site remained ugly for a whole lot longer before dying a nasty death through sheer negligence (indeed, there are many such legacy documents littered around the Web today). This need not be the case though.
CSS gives you the power to set styling rules in one place. When you want to make changes to your web site, you make changes in that one place, and your whole web site changes automatically to reflect those new styles.
Happy Days! CSS Support Is Here
The good news is that the large majority of web browsers in use today offer excellent support for CSS (though this has not always been the case, which is why some people were slow to adopt CSS-based design in the past). Some browsers can choke on a few of the more advanced CSS techniques, but, by and large, you can style your web pages using CSS and be confident that what you see on your screen is the same view that 99.5% of your intended audience will see.
Creating an External CSS File
If you are to make use of all the benefits that an external style sheet can provide, you’ll first need to create a CSS file that can be shared among all the pages of your web site. Open your text editor and enter the following:
/*
CSS for Bubble Under site
*/
p {
font-weight: bold;
color: blue;
}
Save the file in the same folder as your HTML files, naming it style1.css; you can save a CSS file in the same way you saved your HTML files.
Note that the first few lines we typed into our CSS file will not actually do anything. Like HTML, CSS allows you to add comments. It’s a shame that the tags for HTML comments are different from those for CSS comments, but they perform exactly the same function: they allow you to make notes about your work without affecting the on-screen display. In CSS, a comment starts with a /* and ends with a */; the browser ignores anything in between. Above, we used the comment simply to make a note about the purpose of the file, namely that it is the CSS for the Bubble Under site. We’ve also added a rule to turn the type in all our paragraphs bold and blue.
Linking CSS to a Web Page
Before your CSS can have any effect, you need to link it to the web page, or pages, to which you want the styles to apply. To do this, you need to add a link element to the head of each and every web page that will be styled using CSS. Our site contains just three pages at the moment, so this will be nice and easy. The link element simply links a file to the page on which the element appears; in this case, the linked file is a style sheet.
Below, the new line appears in the context of the homepage:
<head>
<title>Bubble Under – The diving club for the south-west
UK</title>
<meta http-equiv=”Content-Type”
content=”text/html; charset=utf-8″/>
<link href=”style1.css” rel=”stylesheet” type=”text/css”/>
</head>
Let’s take a look at what the markup means.
The href attribute tells the web browser where the style sheet file (style1.css) can be found, in the same way that the href attribute is used in an anchor to point to the destination file (e.g. <a href="home.htm">Home</a>).
The rel="stylesheet" and type="text/css" parts of the link tag tell the browser what kind of file is being linked to, and how the browser should handle the content. You should always include these important attributes when linking to a .css file.
Empty Element Alert!
The link element is another of those special empty elements we discussed earlier in this article: it does not have separate start and end tags. link is a complete element in its own right, and ends using the space and forward slash required by XHTML.
Now that we know how to link our pages to our CSS file, let’s try it out on our project site:
- Open each of your web pages —
index.html,about.html, andcontact.html— in your text editor. Add the following line just before the closing</head>tag in each of those files:
<link href="style1.css" rel="stylesheet" type="text/css"/> - Be sure to save each page. Then, try opening each one in your web browser.
All of your paragraphs should now display in bold, blue text. If so, congratulations — you’ve now linked one style sheet to three separate pages. If you change the color specified in your .css file from blue to red, you should see that change reflected across your pages the next time you open them. Go ahead, give it a try.
Now, using blue, bold text might be a good way to make sure your style sheets are correctly linked, but it’s not necessarily the design effect we want to use. Remove the p rule from your style sheet, but leave the comment, and let’s start building our style sheet for real.
Ian Lloyd
