Creating a Global Style Sheet

Web Review
May 1998

Style sheets offer Web designers some great advantages -- the ability to control font types and sizes, positioning, etc. -- but one of CSS's greatest assets to designers is the ability to create global style sheets. Global style sheets can be applied either across your entire site, or across a subset of pages, and doing so means that you only need to update one or two files when you need to make a style change -- not 150 pages. Our goal is to show you how to create your own global style sheet, and show you how to add them to your site.

Planning Ahead

The best way to make the process as easy as possible is to plan ahead. I know, it's a lot to ask, but it really will pay off later.

If you're starting from scratch-- that is, you haven't even written the Web pages yet-- then you're actually a little bit ahead of the game. Before you even start to write the HTML, you need to decide some things. For example:

The whole point of such questions is to let you establish a universal structure for your documents. Oh, sure, there can be variations, but on the whole, each page should use a common format. It's a lot easier to establish these sorts of guidelines when you're starting out. Once you have them firmly in mind, you can create as many pages as you need, following whatever markup strategy you've settled upon.

If you already have pages and want to fit a new style sheet to them, you could be in for some trouble. Generally, Web pages are created on a "what trick did I learn yesterday?" basis; that is, a given page will use whatever cool HTML trick or tag you had most recently encountered. This means that as a whole, your pages don't have a universal structure. Either your style sheet will have to take that into account, or you'll have to go back and restructure all the pages. Neither one is particularly appealing, but it has to be done.

Now, let's say you have a set of pages which use the same general structures: document titles are H1s, the whole page (other then the title) is a one-row, two-cell table with the first cell of class 'sidebar' and second of class 'body', and icons are images of class 'icon'. The links in the 'sidebar' cell are contained in an unordered list. In addition to all this, you have various other HTML, including paragraphs, preformatted text, other tables, and so on. Minus content, then, the page looks something like this: 

<HTML>
<HEAD>
<TITLE>Page Title</TITLE>
</HEAD>
<BODY>
<H1>Page Title</H1>
<TABLE width="100%" border="0">
<TR>
<TD class="sidebar">
(links go here)
</TD>
<TD class="body">
(body content goes here)
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Creating the Style Sheet

The first thing to do is decide what styles you want to use. Once you have a good idea, open up a new document in your favorite text editor (BBEdit, Microsoft Word, emacs, etc.) and enter the styles. When you're done, you should have something like this: 

BODY {font-family: serif; background-color: silver;}
H1 {font: x-large Verdana, sans-serif; color: olive;
    border-bottom: thin black solid;}
TABLE {margin: 0;}
.sidebar {background-color: olive; padding: 0.5em;}
.sidebar UL LI {list-style-type: none; margin-left: 0;
                 margin-right: 0.5em;}
.sidebar UL LI A {color: #FFCCCC;}
.body {background: white no-repeat center
       url(http://www.mysite.org/pix/logo.gif);}
IMG.icon {border: outset gray 3px; padding: 0;}
P {margin: 0em 0.5em; text-indent: 1em;}

I realize that not everything here is supported by all browsers, but that's okay. The unsupported stuff isn't completely necessary. None of it is, actually, since the point of style sheets is that they let you define appearance without disturbing the document's structure. but never mind that now.

Now that it's been entered into your text editor, you'll want to save the above text to a file called general.css. The general part is the file's name-- I picked 'general' because this is the site's general style sheet-- and the .css indicates it's a CSS style sheet. Place the style sheet where your Web browser can get to it, and start gluing your Web pages and your style sheet together. You can do this using either the LINK tag or the @import directive, as we discussed last time. For example, you could add to the HEAD: 

<LINK rel="stylesheet" type="text/css" media="screen"
      href="http://www.mysite.org/styles/general.css">

You'll have to do this for every page, of course, but it's easier to add the LINK tags than it is to re-enter the same style sheet for every page, right? Plus if you ever decide to change the styles, you only edit general.css, and the entire server reflects the change. Now that's power.

Defining the Exceptions

Of course, you may have some pages which require some changes to your general styles. For example, let's say that your help page-- you do have a help page, right?-- should have a navy sidebar instead of an olive sidebar. No problem! Just throw a style sheet into the HEAD of the document: 

<STYLE type="text/css">
   .sidebar {background-color: navy;}
</STYLE>

The cascade order defined in the specification will cause the sidebar to have a navy background on this document, because declarations found in the document itself take precedence over those which are imported from other files.

Let's take that one step further. Suppose you have a whole series of help pages, all of which need navy sidebars. You don't really want to have to put a one-declaration style sheet in every one of them, do you? Of course not. In that case, create a new .css file, such as help.css. This file might contain: 

.sidebar {background-color: navy;}
.sidebar UL LI A {color: #CC9999;}
.body {background: white no-repeat center
       url(http://www.mysite.org/pix/help.gif);}

This file is a reduced set of instructions from general.css, with some of the values changed. Now, in order to use it, you could @import it into each help page: 

<STYLE type="text/css">
   @import (http://www.mysite.org/styles/help.css);
</STYLE>

The browser will import the styles from help.css and use them-- if you place the command correctly. Again, the cascade order comes into play. If you are importing styles from multiple files, and some of them are set on the same elements, then the later commands take precedence over the first ones. In other words, the closer an @import command is to the BODY, the more important it is.

Actually, in order to make sure of this, you might want to @import all of your styles, and not use LINK at all. In order words, a help page would have the following style sheet: 

<STYLE type="text/css">
   @import (http://www.mysite.org/styles/general.css);
   @import (http://www.mysite.org/styles/help.css);
</STYLE>

Pages which aren't part of the help system would have only the first @import directive, of course.

To Conclude

As we've seen, the use of external style sheets can make your job as an author a whole lot easier. Not only does it reduce the size of your files by putting all the style declarations in a different file, but it allows you to define common styles which are applied to every page on the server. If you ever decide to change them, editing one file is all it takes. Furthermore, by combining different style sheets, you can create a complex (yet consistent) look for your entire site, simply by combining the separate files in different ways.