Many Web authors, especially those who manage large Web sites, make use of server-side includes (SSIs). These are small snippets of code which cause the server to dynamically modify the document; for example, the server might display the date and time a document was last modified, or even insert the contents of another file into the one containing the SSI code. Here's a quick look at an SSI: 

<!--#include file="blip.html"-->

This would cause the server to read the file "blip.html" and insert its contents into the document containing the above code. For more details on includes, check out the primer called How To: Server-Side Includes (SSIs), or read Apache: Server-side Includes.

This is useful, of course, because an author can set up a single file which is then copied into other files. If the information changes, all he has to do is edit that single file, and the changes will be propogated into all the files which use it. This is very similar to using LINKed or imported style sheets with multiple documents-- edit the single style sheet, and all the documents which use it will have their appearance change.

Setting Up the Pieces

As I mentioned, one advantage to server-side includes is that you can insert the same file into a whole bunch of other files, which is especially good if you have something which needs to be the same everywhere, and yet may have to change. Of course, that can also be an drawback, because the inserted information is always the same. This is seen most often with something like a navigation toolbar. Let's say that you have a toolbar like this:

Home Games Pictures Movies Sounds Search Help

Just a simple table, no more. Of course, that won't last, because once we start adding styles, it'll start to look really good. We might try something along these lines: 

TABLE.nav TD {border-style: outset 2px gray; background-color: #000066;
   color: white; font: bold 10pt Verdana,sans-serif; padding: 0 0.25em;}

...which, once we add the attribute class="nav" to the TABLE element, gets us the following:

Home Games Pictures Movies Sounds Search Help

All right, so how do we make this work with server-side includes? Simple; just make the table, complete with its class, the include file-- you can call it navbar.html, or anything else. Then, in each file where you need a toolbar, place the tag: 

<!--#include file="navbar.html"-->

Meanwhile, you'll want to take the style for the navigation bar and put it in its own style sheet (let's call it navbar.css) and then link it into each document which has a navigation bar, like so: 

<LINK type="text/css" rel="stylesheet" href="navbar.css">

Now, in order to change the contents of the navigation bar, you need only edit the contents of navbar.html; to change its styles, all you have to do is alter navbar.css. The convenience is obvious... until you decide that you want your navigation bar to be a little bit more "active." Then it gets tricky.

Lighting Up the Buttons

Now that you have this nifty toolbar, you decide that you want the toolbar to light up the button for whichever page you're on. If you're in the "Pictures" area, that button should be light blue with uppercase text, let's say. Ordinarily, you might use an inline style on the appropriate table cell-- only now you can't, because the toolbar markup is being brought in from the file navbar.html. You can't even make the change in that file, because then the change will be seen in every document that includes the toolbar. Now what?

The solution is, predictably, easy once you've thought of it. Simply assign a unique identifier to each cell, and then assign a style to whichever cell corresponds to a given page. Since you're dealing in unique identifiers, this is a custom-made case for using IDs. First, you edit navbar.html to look like this: 

<TABLE class="nav">
<TR>
<TD ID="home">Home</TD>
<TD ID="games">Games</TD>
<TD ID="picts">Pictures</TD>
<TD ID="moovs">Movies</TD>
<TD ID="snds">Sounds</TD>
<TD ID="search">Search</TD>
<TD ID="help">Help</TD>
</TR>
</TABLE>

Now each table cell has its own label. If you ever need another button, simply add a cell to the table and give it its own unique name. Having laid the groundwork, you're ready to add a style to each of your pages and make the buttons light up! On the "Pictures" page, you might add this rule in order to get the following result: 

<STYLE="text/css">
  TD#picts {background-color: #6666CC; text-transform: uppercase;}
</STYLE>
Home Games Pictures Movies Sounds Search Help

On each different page, all you have to do is change the selector to use the correct ID; on the Search page, it would be TD#search.

Using this setup, you can also change the highlight for each page, simply by changing the styles. It's up to you. While you're at it, you could even use the IDs to set up different colors for each button on all the pages. For example, you might want to make the search button's background dark green, and help button dark red. In that case, add the following rules to navbar.css: 

TD#search {background-color: #006600;}
TD#help {background-color: #660000;}

...and see the following on all your pages:

Home Games Pictures Movies Sounds Search Help

When you visit the search page, then the inline "highlighting" style will simply override the linked style, like so: 

TD#help {background-color: #CC6666; text-transform: uppercase;}
Home Games Pictures Movies Sounds Search Help

Of course, you could use different styles-- these are just the ones that I came up with.

Conclusion

So that's how you combine server-side includes and linked style sheets to get some pretty sophisticated effects which are controlled from a few central files. It doesn't just stop with toolbars, of course; you could use this sort of approach for document footers that contain the Webmaster address and other information, or to put in a signature of some sort which changes color depending on the type of document.

If you find a cool new way to use these techniques, drop me a line and let me know. If I get some good examples, I'll feature them in a future article.