External Stylesheets

You’ve used the style attribute to change the visual presentation of a single element, and the <style> element to create an embedded stylesheet to control an entire page. But what if you have twenty pages, and you want the same stylesheet to apply to all of them. You could copy and paste the embedded stylesheet to all twenty pages, but then if you needed to make a change in the style, you’d have twenty documents to change. What you want is a way to put the stylesheet into one file and have all twenty pages reference that stylesheet. Here’s how it works:

Step One: Create a stylesheet file

Presume you have an HTML document with an embedded stylesheet that you have tested, and that looks the way you want. Take everything between the <style> and </style> tags except for the HTML comments (which were used to hide the style from older browers), and paste it into a file. Give that file an appropriate name. For example, you would copy and paste all the information shown below in black into a file called mystyle.css The extension does not have to be css, but it’s the one that most people use, and it leads to less confusion if you follow that standard. In the following example, you would copy everything in black, leaving out the text in gray italics.

Important! An external CSS file never contains any HTML. It contains only CSS. That is why you do not want to copy the <style>, </style>, <!-- or --> into your external CSS file.

<style>
<!--
body {
	font-family: arial, helvetica, sans-serif;
	background-color: white;
}

p {
	line-height: 125%;
	text-indent: 0.5em;
}

h3 {
	font-style: italic;
	color: red;
}
-->
</style>

Since you have copied the information, you may now get rid of the entire <style> element in your original HTML document.

Note: Some people just start with a separate CSS file rather than creating an embedded stylesheet and then transferring the content to an external file. If you wish to proceed in that way, go ahead. Just remember: no HTML goes into your CSS file, ever.

Step Two: Link to the stylesheet

Now place the following in the <head> of every document that should be controlled by that stylesheet:

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

The href attribute points to the place where the stylesheet can be found. You should use a relative path name, so if a document in a subdirectory needs the stylesheet, you may have to write something like href="../mystyle.css" to get to the correct directory.

That’s all there is to it. Now any change that you make to mystyle.css will be reflected in all the pages that link to it.

Another Way to Link

Sometimes you will use style constructs that don’t work well in older browsers (or don’t work at all). If you import a stylesheet, it does the same as the <link>, but it works only in newer browsers.

The folowing example shows a document that uses two stylesheets. The first one, all_browser_styles.css is linked in, so all browsers will use it. The second one, new_browser_styles.css, is imported, so only the latest browsers will use the specifications in that stylesheet.

<head>
<link rel="stylesheet" type="text/css" href="all_browser_styles.css" />
<style type="text/css">@import "new_browser_styles.css";</style>
</head>

Using id as a selector

We have discussed the use of classes to apply styles to specific elements within a document For example, you can have three paragraphs that all have class="warning". Sometimes you want a style to apply to one element, and only that one element.

For example, what if you wanted a “banner section” that occurred only once on a page? In that case, you would set up a <div> with an id attribute. The value of the id attribute must start with a letter, and it must be unique. If you say <div id="banner">, then you cannot have another element of any kind anywhere else in that document that also has id="banner". To associate a style with an id, you use the # notation, much as you did for within-page links. You might write:

#banner {
   font-size: 200%;
   background-color: #cff;
   font-style: italic;
   border: 4px solid teal;
   padding: 0.25em;
}