Click on our Sponsors to help Support SunWorld
Webmaster by Chuck Musciano

Control everything about your documents' appearance with style sheets

Learn why the ability to dictate fonts, margins, colors, and layout on any browser is now becoming reality -- and how to apply a style to your documents

SunWorld
February  1997
[Next story]
[Table of Contents]
[Search]
Subscribe to SunWorld, it's free!
Abstract
With the introduction of styles in Internet Explorer 3.0 and the forthcoming cascading style sheet standard, authors can finally control the look and feel of their documents at the browser level. (2,000 words)


Mail this
article to
a friend
It is the Holy Grail of Web authors: the ability to control the appearance of your document, no matter where it is displayed. Until recently, the ability to dictate the font, line spacing, margins, colors, and layout of your page -- regardless of how the browser was designed to display your documents -- was nothing more than a pipe dream. With the release of Internet Explorer 3.0, the recent initial beta release of Netscape Communicator (which includes Navigator 4.0), and the general acceptance of the World Wide Web Consortium's Cascading Style Sheet specification, managing your documents' appearance soon will become a reality.

This is all accomplished through a style sheet: a collection of rules that tell the browser how to render each HTML tag in your document. You can use multiple style sheets to define the appearance of a single document; these sheets are applied to the document in a hierarchical or cascading manner. Appropriately used, style sheets let you manage the look and feel of all the documents on your site, providing you the ability to change, say, the background of all the documents by editing a single file. Of course, style sheets can be used poorly, making it almost impossible to figure out why a particular document looks so unattractive.

In this column and several to follow, we're going to examine style sheets in detail. We'll start with the fun stuff -- how to define a style and apply it to your documents, along with a few style attributes you'll want to tinker with. Next month, we'll delve into formal style sheet usage and look at how you can manage collections of documents using style sheets. We'll conclude the series in April with a review of JavaScript-based style sheets, comparing and contrasting them with cascading style sheets.

Microsoft, Netscape style sheet support status
As we work our way through this topic, keep in mind that style sheets are still in their infancy. Internet Explorer 3.0 is the only shipping browser with any sort of style sheet support, and the current beta releases of Netscape 4.0 don't support cascading style sheets.

You don't see many style sheet-based documents on the Web right now for two reasons. First, Internet Explorer 3.0 is not well deployed on desktops (regardless of the Microsoft hype machine, Internet Explorer is barely cracking the 10 percent penetration mark), so there is little incentive for authors to use style sheets. More importantly, if you visit a site using style sheets with a style-impaired browser, you'll never know you missed anything. Unlike tables and frames, which are unviewable on incapable browsers, documents using style sheets are explicitly designed to degrade gracefully on lesser browsers.

Oh sure, the text won't be in 14 point mauve Helvetica set on 20 point leading, but it will be perfectly readable in your browser's conventional font. Unless the author has some sort of disclaimer telling you how great the page would look if you had style sheet support, you'll never know the difference. In fact, if you've browsed pages on Microsoft's site, you've probably stumbled over style sheets and never known it.

Don't let this deter you from learning about style sheets. Trust me, when enough browser support is available, style sheets will take off as quickly as frames and tables.

Cascading style sheets are formally defined by the World Wide Web Consortium in its Cascading Style Sheet Recommendation (see Resources section for pointers to this and other sites related to this topic). This document defines a broad range of style features and attributes, which may subsequently be implemented by a browser. Microsoft has implemented a subset of this recommendation in Internet Explorer 3.0, hitting the high points of the proposed standard while leaving out many of the more useful and complex features of style sheets. Microsoft's implementation is described in its User's Guide to Style Sheets.

Finally, Netscape has been promising style sheet support in version 4.0 of Netscape Navigator, but seems to be hedging on whether explicit support of the cascading style sheet model will be included. Netscape is pushing its own JavaScript style sheet proposal, which promises to include cascading style sheet functionality. Early beta versions of Netscape 4.0 did not support cascading style sheets, but that may change as later beta versions appear. It would be a stunning disappointment for Netscape to abandon the cascading style sheet model in favor of its own proprietary style sheet implementation. Time will tell if Netscape is willing to abide by the style sheet standard already defined for the Web.

Advertisements

Boilerplate for test docs
For the remainder of this column, I'll be presenting all sorts of examples of styles. Since I won't tell you how to apply styles to your documents until next month, this makes it hard for you to experiment as we go along. To help you over this initial hurdle, I offer this bit of boilerplate for your test documents: 

     <style type="text/css">
     <!--
     Your styles go here!
     -->
     </style>

Place this snippet of HTML in the <head> of your document and place your styles where I've indicated. They'll be applied to your document when viewed with Internet Explorer 3.0, letting you experiment and tinker along with me.

Styles galore: Here are the rules
A style is known formally as a rule and has two parts: a selector and a declaration. The selector defines which tags are affected by the rule; the declaration defines one or more properties and corresponding values to be applied to those tags.

This is much easier than it sounds. Here is a simple rule: 

     H1 { color : blue }
The selector is H1, indicating that this rule is to be applied to all <h1> tags. The declaration is delimited by the curly braces and contains a single property (color) and its value (blue). In short, this rule states that all elements within <h1> tags in the document are to be rendered in blue.

Pretty simple stuff. You can have multiple rules, of course: 

     H1 { color : blue }
     H2 { color : yellow}
     H3 { color : green }
While capitalization and line breaks are not important in the rules, it seems to be an early consensus that tag names are always in upper case and that multiple rules are written on separate lines.

You can apply a single declaration to several tags by listing the tags, separated by commas, in the selector. To display all your headings in blue, you could use 

     H1, H2, H3, H4, H5, H6 { color : blue }
You don't have to group related tags; feel free to mix and match tags within a selector. Let common sense prevail, so that your styles make sense and are understood (and modified!) easily by others. For example, 
     H1, A, LI, EM { color : blue }
is certainly valid, but you might question why such disparate tags have found themselves with a common color.

You can put multiple properties in a declaration, separating the properties with semicolons: 

     H1 { color : blue; font-size : 24pt }
Finally, you can apply several properties to several tags by combining multiple selectors with multiple properties in the declaration: 
     H1, H2, H3, H4, H5, H6 { color : blue; font-size: 24pt }
At this point, those of you using Internet Explorer 3.0 might want to go and create as many 24-point blue things as you can, just to prove that this stuff really does work.

Context-based styles
One of the most powerful aspects of cascading style sheets is the ability to define context-based styles. These styles are only applied to tags that are nested in a certain way in your document. To define such a style, you list the required tag nesting in the selector, without the commas. This is known as a contextual selector.

For example, suppose you want emphasized text within <h3> tags to be underlined. You could write 

     H3 EM { text-decoration : underline }
Whenever the browser encounters an <em> tag within an <h3> tag, it will underline its contents. <em> tags encountered in other contexts will not be underlined.

One of the neatest things you can do with this sort of style is to change the appearance of nested lists. These rules define a classic outline numbering scheme: 

     OL LI          { list-style : upper-roman }
     OL OL LI       { list-style : upper-alpha }
     OL OL OL LI    { list-style : decimal }
     OL OL OL OL LI { list-style : lower-alpha }
The first rule changes the numbering style of all numbered lists to upper-case Roman numerals. The second rule says that all <ol> tags nested within another <ol> tag are to be numbered with upper-case letters. The third converts the next level of nesting to decimal numbers, while the last rule converts the final level of nesting to lower-case letters.

Notice that it doesn't matter that there are intervening nested <li> tags that are not mentioned in the selector; the browser figures out your intended style context.

Before you try this, you should know that Internet Explorer 3.0 does not implement the list-style property. You can simulate the behavior, however, by using another property, such as color. The best part about this example is that once you've seen it work, you are a believer in style sheets!

Defining tag classes
It is possible to define different classes of a tag. For example, suppose you want to create an italic and a bold-faced paragraph style. You might say 

     P.italic { font-style : italic }
     P.bold { font-weight : bold }
Later in your document, you can refer to a specific tag class using the class attribute in the tag: 
     <p class=italic>This text is italic
     <p class=bold>And this will be bold
Class specifications (a tag name followed by a period and the class name) can be used anywhere in a rule you can use a regular tag name, including contextual selectors.

Classes are very powerful tools. When designing a family of documents, you should define a number of standard classes that are used consistently throughout your documents. Later, you can change the look of your documents by redefining just those classes you wish to change. Classes give you all the power and flexibility that paragraph styles provide in traditional word processors.

Next month: 3 ways of applying styles to your documents
We've run out of space for this month, so we'll resume next month with a look at font styles and a tutorial on applying styles to your documents in three different ways. In the meantime, experiment with what we've covered so far, read the style documents I link to below, and wonder how a column that is published only on the Web can run "out of space."


Click on our Sponsors to help Support SunWorld

Resources

About the author
Chuck Musciano has been running Melmac and the HTML Guru Home Page since early 1994, serving up HTML tips and tricks to hundreds of thousands of visitors each month. He's been a beta-tester and contributor to the NCSA httpd project and speaks regularly on the Internet, World Wide Web, and related topics. His book, HTML: The Definitive Guide, is currently available from O'Reilly and Associates.

What did you think of this article?
-Very worth reading
-Worth reading
-Not worth reading
 -Too long
-Just right
-Too short
 -Too technical
-Just right
-Not technical enough
 
 
 
    

SunWorld
[Table of Contents]
Subscribe to SunWorld, it's free! 		[Search]
Feedback 		[Next story]
Sun's Site

[(c) Copyright Web Publishing Inc., and IDG Communication company]

If you have technical problems with this magazine, contact webmaster@sunworld.com

URL: http://www.sunworld.com/swol-02-1997/swol-02-webmaster.html
Last modified: