Linked Style Sheets

Robert B. Hess
Software Design Engineer
Microsoft Corporation
January 10, 1997

Linked style sheets are one of the more powerful features of cascading style sheets. They provide the ability to create one style sheet that affects multiple pages. If you design your pages to take maximum advantage of this feature, you can change the entire look and feel of your site by modifying just one file.

To use a linked style sheet in your Web page, do the following two things:

Create a text file with the CSS extension. This file contains the cascading style sheet definition that you want to load. The file might look something like this:
```
body {
  font-family:"Verdana,Sans-Serif";
  font-size:10pt;
  background:white;
}
H1 {
  font-family:"Verdana,Sans-Serif";
  font-size: 16pt;
  color:white;
}
p.indented {
  margin-top:-10pt;
  text-indent:12pt;
}
```
The indenting is not essential for functionality; it makes the style sheet easier to read.
Use the <LINK> tag in your .HTM (or .HTML) file to link your .CSS file to your page. For example, if you save the file above as "simple.css," you can add the following HTML to your Web page:
```
<LINK REL="STYLESHEET" HREF="simple.css">
```

To illustrate how linked style sheets work, I've created a Web page (a recipe of mine for Escargot) and added some VBScript code to it that determines the correct style sheet to use (out of five possiblities) at load time. At the top of the page, a series of links enables you to select each style sheet in turn. Note that each link points to the same page (escargotmafacon.htm), and loads a different style sheet. For example, the style sheet for selection #1 is an empty file, which represents how this page looks when rendered by a non-CSS-aware browser.

You can jump straight into the page and bring up a random style sheet or you can select one of the images below to display the page with that style sheet.

Linked Style Sheets

Further Reading: