Site Map

Your Current Location is in Yellow

Home

What That?

Web & Flow

The Nightmare

Background Tricks

To Style or Not

Browser Wars

I’ve Been Framed

Music!

Graphics

Great Pages

HTML FAQ

Arachnophilia

To Style or Not

When I first tackled STYLE, I thought the amount of typing involved was ridiculous. Until I got the hang of it and discovered that by defining properties in the HEAD of the document or in a stylesheet, I could zip along without having to stop and type FONT and CENTER and a bunch of attributes over and over. I also discovered that if I decided to make changes to the site , I could make the change once in the stylesheet and instantly update the look of every page linked to that stylesheet. In addition, the control over the layout and style of the page is much better, much more exact, much more dependable using style rather than a bunch of lame attributes or, worse yet, nonbreaking spaces.

The tricky part about stylesheets is the cascade and inheritance issues. If you don't pay attention to the rules of inheritance and importance, you may get unexpected results. With that exception, style is the easiest way to control the layout of your webpages.

This is not a STYLE tutorial (there are several very good ones on the net), but I will cover a few basics.

There are basically three ways to set style:

• assign properties and values to elements
• assign properties and values to a class
• assign properties and values to an id

Elements can be generically “defined” — background, font family, size and weight, text characteristics such as alignment, margins and padding, etc., for example:

P,TD,DIV,BLOCKQUOTE { font: arial 12pt 600; color:black; background:white url(foo.gif) }

You can further refine the style using class and/or id. You can assign a class or id to a specific element, e.g. H1.green { color:green } and the element will have all its already assigned properties plus be green when you add ‘class=green’ to the tag. You can also specify the class as a generic so that any element modified with that class will take on those properties. This is especially helpful when the you want a section of your page to have a consistent look that stands out from the rest of the page.

Now, I stated that you could use class or id to gain more specific control over the appearance of elements. You may wonder what the difference is. After all, typing id=ctr is a lot quicker than typing class=ctr, so why not use id all the time rather than class? This is one of those cases where you can do something although you may not do it. Class will apply to the specified element or to any element in the document. You can use the same class value over and over. You can do the same with id, but id is supposed to be reserved for a single instance of that property/value. This is similar to the “bad form” advice often given to people who inquire about moving text to the right in order to clear a background image border. Frequently the newbie is advised to use multiple <UL> tags to move the text over. This is something you can do — that is, it seems to work. But it is a bad choice. So, returning to class and id: use class to specify a style you will use several times on a page; use id for one specific instance.

Style is especially helpful when the “look” of an element involves a set of properties. For example, if you want your H1 to be centered, different font-family, in italics, red text, and really big, you could write:

<H1 align=center><FONT color=red face="arial" size="+3"><I>Text</I></FONT></H1>

— every time you use that heading style.

Or you could use style:

H1.red { font: arial 32pt italic; color:red; text-align:center }

— and every time you want that style, you need only type

<H1 class=red>Text</H1> .

By typing all these specifications once in the STYLE declaration or stylesheet, you don't have to type the same thing over and over each time you need it. Since you are using tags (elements) to structure the page, your code will be leaner and cleaner and less prone to error. And the icing on the cake: when you decide to change the look of your pages, you can do so by simply changing the styles.

This brings me to a final comment about structure and presentation. I highly recommend the use of <EM> rather than <I> for italics and <STRONG> rather than <B> for bold because you can assign style to EM and STRONG, thereby tweaking the appearance of text in those elements. With B and I, you are stuck with how the visitor's browser decides to render those tags.

All that said, there is another compelling reason not to use stylesheets: there are still millions of internet surfers who are using old browsers that don't support stylesheets. This is especially true of AOL users, sad to say. Touting itself as a premier service, AOL typically has provided out-of-date browsers. In addition, the online services tend to lull people into thinking they don't have to do anything such as update their software because the Internet Mother, e.g. AOL, will take care of all their needs. On top of that, Netscape's latest release still does a very poor job of rendering style. On the plus side, if you use the HTML tags intelligently, the lack of style won't ruin your pages, even though they will be pretty primitive looking.

This brings us to the choice: To Style or Not. And that’s a question you must answer for yourself. Do you settle for a page that looks consistently so-so in most browsers, or do you take the plunge and use style to give your pages zip when viewed by capable browsers, but makes them “crash and burn” in older browsers?

My choice: “Damn the torpedos — full speed ahead!”

Copyright © 1999 Carlton Higginbotham, Meade Street Productions.
No part of this site, including graphics and text, may be reproduced without written permission. Please post questions and comments on the Forum

Last updated