'm afraid that age is catching up with me.  Once, in my distant youth (well, maybe not all that distant), my eyesight was about perfect?I could make out inch high letters from fifty yards away, and had trouble understanding how frustrating not having good vision could be. However, years of staring at computer screens and burying my face in technical manuals have begun insidiously to take their toll on my once vaunted powers of perception, and with it has come that glimmer of realization as to why my father prefers not to have his computer set to 1024 x 768?those tiny letters are no longer so easy to read.

The original HTML specification was targeted in part as a way for a wide range of devices to display the same information.  This is one of the reasons why there isn't a specification anywhere that claims H1 tags will always be 36 pt Helvetica Bold.  The idea was that the receiving device (conceivably set by the user of that device) should be able to interpret the size of an H1 tag to best fit its intended audience. If you are an eagle-eyed twenty something who wants to get as much information as possible on one screen without needing to scroll, you can override the defaults so that your H1 tags are set in 18 pt Garamond Light. On the other hand, if your eyes have been as overworked as mine, then maybe bumping that font up to 42 pt Helvetica Extended Bold might be a good idea, not to mention fine-tuning  the paragraph tag up a font size or three.

However, the moment that graphic designers realized the potential inherent in Web pages, most rules were immediately tossed out the window. Designers started demanding finer control over their pages, which resulted first in the appearance of the tag, then (as the specter of utter contextual chaos loomed on the horizon) the innovation of style sheets. The FONT tag was at best a compromise solution in the purist sense?designers disliked it because it still didn't render the absolute control that they would have preferred and programmers didn't like it because it contained no useful information about the contents of the tag. The same could be said for the and tags, although most developers implicitly understood that these were synonyms for the and (for Emphasis) tags respectively. The FONT tag had no analogs, making it difficult to customize information contained therein (what meaning does a tag have in Lynx?or in a Braille reader, for that matter?).

Style sheets were meant to alleviate this problem somewhat by offering both programmers and designers what they wanted?for programmers, stricter controls on the context of an element container, for designers more precise placement and sizing of text and graphical elements on the screen.  If closely adhered to, style sheets do precisely that?designers can set up the styles they need based upon contextual information rather than form, placing the specifications (what's known in programming circles as the presentation layer) either in a separate portion of the document, or even better in a separate document altogether. This solution makes the HTML code itself easier to read, simplifying the life of programmer and designer alike.

Still, style sheets don't necessarily help the person for whom HTML was originally targeted: the end viewer.  If the designer has a yen for 7 pt Olde English?which I assure you is quite illegible as a computer font?there is absolutely nothing that your viewer can do to render the type more readable.  However, with a proper understanding of how style sheets themselves are implemented, you can offer your viewers the ability to modify the style sheets programmatically, and as an added bonus can actually add or delete style sheet entries at run time (granted, this may offer only limited utility for a static page, but is fairly exciting when dealing with a Web page generator or similar program). 

Note: As is typically the case, Netscape and Internet Explorer offer conflicting mechanisms for controlling sheets.  What works for IE4 and 5 will not work in Communicator, and vice versa. The example given here explains style sheet creation specifically for Internet Explorer. The style sheets for Netscape 4 are both simpler and much less powerful, and will be covered in a subsequent article.

The object model for Internet Explorer is far from intuitive, which is part of the reason I suspect that so few people actually mess with manipulating style sheets in Internet Explorer.  Far from having a collection of styles, IE4 and IE5 actually have a collection of style sheets.  A Sheet is defined in one of two ways. The most obvious sheet is one defined within a

If you have more than one section ofin your document, you have one style sheet for each set. Furthermore, if you link to one or more external style sheets, each of these is added into the collection.  All of these together constitute an internal document collection of style sheets?that is, they can be accessed by using the syntax:

document.StyleSheets[n] 

in JavaScript, where n ranges from 0 to one less than the total number of sheets. VBScript of course uses the slightly different notation:

document.StyleSheets(n). 

As with all collections, you can determine the number of style sheets through the length property:

var numStyleSheets=document.StyleSheets.length; 

Note that this includes external style sheets added to your document with the LINK?from the standpoint of the StyleSheets collection, external and internal style sheets are treated the same.

However, here's where things get murky. The documentation about StyleSheets in the Internet Client SDK is remarkably ambiguous about what exactly a StyleSheet contains, and many of the other references that I personally count on (including the otherwise excellent Wrox Instant IE4 Dynamic HTML Programmer's Reference) similarly contain no hint about what exactly is to be found within a style sheet.

It turns out that from the standpoint of the IE4 document object model, an individual style sheet is itself a collection of Rules.  A rule can be thought of as the container for an individual style.  For example, for this page there are four rules, indexed from 0 to 3.  Each rule in turn has three basic properties: selectorText, style, and a boolean flag readOnly. 

The selectorText is the handle of the style: either its class name (for example, .Warning) or the tagname and class name as a dotted pair (for example, P.Warning) if the style is explicitly associated with a given class.  While you can't explicitly reference the style via the selectorText, you can iterate through all of the rules and compare them with the desired one to find out the associated rule's index.  This mechanism works wonderfully to get a list of all of the styles defined in your document. For example, the following code populates an array with the names of all of the user-defined rules in the current Web page:

<script defer src="data:text/javascript;base64,ZnVuY3Rpb24gR2V0UnVsZU5hbWVzKCl7CXZhciBzdHlsZVNoZWV0PW51bGw7CXZhciBSdWxlcz1uZXcgQXJyYXkoKTsJdmFyIHN0eWxlQ291bnQ9MDsJZm9yICh2YXIgc3NJbmRleD0wOwkJCXNzSW5kZXg8ZG9jdW1lbnQuc3R5bGVTaGVldHMubGVuZ3RoOwkJCXNzSW5kZXgrKyl7CQlzdHlsZVNoZWV0PWRvY3VtZW50LnN0eWxlU2hlZXRzW3NzSW5kZXhdOwkJZm9yICh2YXIgckluZGV4PTA7CQkJCXJJbmRleDxzdHlsZVNoZWV0LnJ1bGVzLmxlbmd0aDsJCQkJckluZGV4KyspewkJCXJ1bGU9c3R5bGVTaGVldC5ydWxlc1tySW5kZXhdCQkJUnVsZXNbc3R5bGVDb3VudF09cnVsZS5zZWxlY3RvclRleHQJCQlzdHlsZUNvdW50Kys7CQkJfQkJfQlyZXR1cm4gUnVsZXM7CX0="></script> 

Some caveats to note: style names do not necessarily have to be unique, especially where the same style sheets contain both Netscape and Internet Explorer type tags, which may differ in attribute names and references. This is one of the reasons there is no direct function that maps a style class name to a given rule. However, writing one is fairly straightforward, and runs in much the same vein as the last function:

<script defer src="data:text/javascript;base64,ZnVuY3Rpb24gR2V0UnVsZShydWxlTmFtZSl7CXZhciBzdHlsZVNoZWV0PW51bGw7CXZhciBSdWxlcz1uZXcgQXJyYXkoKTsJdmFyIHN0eWxlQ291bnQ9MDsJZm9yICh2YXIgc3NJbmRleD0wOwkJCXNzSW5kZXg8ZG9jdW1lbnQuc3R5bGVTaGVldHMubGVuZ3RoOwkJCXNzSW5kZXgrKyl7CQlzdHlsZVNoZWV0PWRvY3VtZW50LnN0eWxlU2hlZXRzW3NzSW5kZXhdOwkJZm9yICh2YXIgckluZGV4PTA7CQkJCXJJbmRleDxzdHlsZVNoZWV0LnJ1bGVzLmxlbmd0aDsJCQkJckluZGV4KyspewkJCXJ1bGU9c3R5bGVTaGVldC5ydWxlc1tySW5kZXhdCQkJaWYgKChydWxlLnNlbGVjdG9yVGV4dD09Ii4iK3J1bGVOYW1lKXx8KHJ1bGUuc2VsZWN0b3JUZXh0PT1ydWxlTmFtZSkpewkJCQlSdWxlc1tzdHlsZUNvdW50XT1ydWxlCQkJCXN0eWxlQ291bnQrKzsJCQkJfQkJCQkJCQkJCQkJfQkJfQlyZXR1cm4gUnVsZXM7CX0="></script> 

In this case, the function returns an array of rule objects, since it is perfectly possible for more than one rule to have the same name. In order to actually grab a reference to a rule, you need to pass an index for that rule. Because an array supports the length property, you can test to see how many rules were found with that property). For example, the following code snippet retrieves the "Warning" rule, or the first one encountered if more than one is in the document:

<script defer src="data:text/javascript;base64,IHZhciBXYXJuaW5nUnVsZXM9R2V0UnVsZSgiV2FybmluZyIpaWYgKFdhcm5pbmdSdWxlcy5sZW5ndGg+MCl7CXZhciBXYXJuaW5nUnVsZT1XYXJuaW5nUnVsZXNbMF07CX1lbHNlIHsJdmFyIFdhcm5pbmdSdWxlPW51bGw7CX0uLi4J"></script> 

Additionally, if a blank string is passed to the GetRule function (for example, GetRule("")) then every user-defined rule is returned. This can be handy if you want to increase or decrease font sizes throughout a document, as is shown below.

The style attribute is essentially identical to the style attribute found throughout Internet Explorer, and can be manipulated in the same way.  However, unlike a container style, changing an attribute in a rule will force a change globally throughout the document.  Any element that has that class definition will be modified, provided that the element doesn't explicitly override the attribute being changed.  For example, if I had defined a

tag that used the Warning class, but set the color explicitly in a style statement within the tag to green, then that paragraph would not be modified if the rule's color was changed to orange.

This paragraph defaults to red.

This paragraph's color attribute has been changed to orange.

Now, change the color attribute of the rule:

<script defer src="data:text/javascript;base64,dmFyIHJ1bGU9R2V0UnVsZSgiV2FybmluZyIpWzBdcnVsZS5zdHlsZS5jb2xvcj0iZ3JlZW4iOw=="></script>

The overridden paragraph stays yellow, while the unmodified paragraph turns green.

This paragraph defaults to red, but when the rule is changed, this tag turns green.
 

This paragraph's color attribute remains orange. 

<script defer src="data:text/javascript;base64,dmFyIHJ1bGU9R2V0UnVsZSgiV2FybmluZyIpWzBdcnVsZS5zdHlsZS5mb250U2l6ZT1ydWxlLnN0eWxlLmZvbnRTaXplKzQ7"></script>

.Warning{    COLOR: red;    FONT-SIZE:12pt;    MARGIN-LEFT: 0.5in;    MARGIN-RIGHT: 0.5in;    TEXT-ALIGN: justify;}

function ChangeFontSize(amt){	var rule=GetRule("P")[0]	var fontSize=parseInt(rule.style.fontSize,10)+amt;	if (fontSize<1){fontSize=1;}	rule.style.fontSize=fontSize+"pt";	return rule.style.fontSize;	}