Linked Style Sheets

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:

1. 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.

2. 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.

Further Reading:

From the Microsoft Site Builder Workshop:

A User's Guide to Style Sheets

An introduction to style sheets for Web authors. This guide explains how you can add style sheets to your Web pages, describes usage and syntax, and provides some useful tips.

Style Sheets: A Brief Overview for Designers

Descriptions and examples of layout and formatting enhancements you can add to your pages using style sheets.

From the World Wide Web Consortium:

Cascading Style Sheet Specification

The proposed specification by the World Wide Web Consortium for cascading style sheets.

CSS Quick Reference

A handy quick reference for cascading style sheets.

Web Style Sheets

A page prepared by the World Wide Web Consortium that provides a list of resources for Web based style sheets.