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:
Example 3.1. style1.css
/*
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 do exactly the same thing: 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 with 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:
Example 3.2. index.html (excerpt)
<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.
Note: Empty Element Alert!
The link element is another of those special empty elements we discussed in Chapter 2, Your First Web Pages: it has no start or end tags. link is a complete element in its own right, and ends with 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, and contact.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.
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.
Share and Enjoy:
