NOTE: This tutorial presumes you are using
the "Dark" stylesheet (select at bottom).
Using Multiple Stylesheets
Owen Strain explains the basics of using CSS on his website, so you should be familiar with the general idea. If you followed the link he provides to the CSS Zen Garden, you would probably agree that the most powerful feature of CSS is the way it can completely change the visual structure of a page without altering content. A practical upshot of this is that, for the price of a little more work on the author's part, the reader no longer has to compromise as much with the author over page appearance.
To refer back briefly to the discussion of different ways to view hypertext, two primary views were expressed on the matter of hyperlink appearance. Shelley Jackson's Patchwork Girl lexia "seam'd" contains a brief summary of these themes:
You may emphasize the presence of text links by using a special style, color or typeface. Or, if you prefer, you can leave needles sticking in the wounds--in the manner of tailors--with thread wrapped around them. Being seam'd with scars was both a fact of eighteenth century life and a metaphor for dissonant interferences ruining any finely adjusted composition. [Hypertext 2.0, George P. Landow, p.199]
The seam--in this case an HTML hyperlink--creates the whole, binding separate pages together into a coherent site. It also interrupts the flow of text. Jeffrey Pack presents hyperlink scars as "a mark of disfigurement. Scars are ugly...They're jarring breaks in the otherwise even epidermis." Pack goes on to describe the 'scar' underline most web browsers affix to hyperlinks, and to comment that it is up to the user to alter the formatting. CSS makes the decision to show or hide such scars quite simple. A user simply has to choose their stylesheet.
To see a demonstration, try clicking here. If you have javascript enabled (and you should, if you've been following the examples) the link formatting should have disappeared, letting the links fade back into their containing text. They are still there, simply camouflaged. If I understand the Storyspace reader correctly, pressing a button will reveal links within the text; this use of stylesheets may be treated the same way. View the source of this page. You will see in the header a number of stylesheet links. One is linked as rel="stylesheet", the rest as "alternate stylesheet". The default stylesheet is the one without the word "alternate". An author could easily have their page load with no textual formatting for links, then include an easily identifiable [BUTTON] that would reveal the links when they wished to move onwards. (In case you missed the hint, click the word button; it will reset the page's stylesheet to the default.)
How It's Done
This neat trick was executed using a javascript file created by an English teenager named Paul Sowden. As was the CSS-driven dropdown tutorial, his brief article on his code is likewise available through the wonderful resource site A List Apart. That website's policy makes all their example source code available for free to the public, so by all means check it out!
The actual javascript function call used to switch links is a simple addition to a traditional <a> tag.
<a href="#" onclick="setActiveStyleSheet('Dark');return false;">link name</a>
"Dark" is the "title" attribute of my preferred, or default, stylesheet. The other function call in this document, the one to remove the links, is triggered with setActiveStyleSheet('Dark, No Links'). When you are creating alternate stylesheets it can be useful to take advantage of the "Cascading" feature of CSS. If another sheet already has the structural markup, reuse it! In your new sheet, only include those changes you wish to make, and then link it to the original. CSS implementation gives priority to the most recently declared style for a particular element, so your new sheet will override the appropriate elements of the old. The "No Links" stylesheet is only a few lines of code:
@import url("dark.css");
a:link, a:hover, a:visited {
text-decoration: none;
}
a:link, a:visited,
a:link:hover, a:visited:hover {
color: #BAA;
}
acronym { border: 0; }
The first line imports all the complicated positioning and background color from dark. It's a simple matter to remove the acronym and hyperlink formatting.
What Now?
Creating an effective stylesheet is a time-consuming process, and creating several that work interchangeably is even harder. A hypermedia author interested in adding this level of user control should dedicate enough time to make sure everything really works correctly. Accessing them is also an issue. Users of Firefox, Konqueror and other real browsers (not IE, of course, but who are they really fooling?) have a submenu within the browser's "view" taskbar menu that allows them to select the proper stylesheet. The footer of this document contains a narrow bar with links to every available stylesheet; an even more graceful solution can be found on Safari developer David Hyatt's weblog. In the upper-right-hand corner of the default layout there is a small, CSS-driven dropdown menu with each of his available stylesheets. Quite effective.
>>> Continue to Stretch-Text >>>
Off-Site Links
- The CSS Zen Garden
- Working With Alternate Stylesheets, a javascript stylesheet changer
- Using Web Standards: CSS, from Owen Strain's How to Make a Final Project
- Surfin' Safari, Dave Hyatt's Weblog
Other works cited:
Landow, George P. Hypertext 2.0. Baltimore: John's Hopkins University Press, 1997.
