Network: Web Design

In the second of a three-part series, we show you how to use Cascading Style Sheets to redefine the attributes of existing HTML tags

Most word processors today include a way to make changes to text not just on a word by word basis but throughout an entire documentby using "styles". Styles work by collecting all of the different attributes - bold, italic, size, etc - that you want to apply to similar types of text - titles, body, captions, etc - and giving these groups of attributes a common name. Say you want all of the section titles in your document to be 14pt, Times and italic. You would assign all of those attributes to a style called "section title".

Whenever you type in a section title, all you have to do is use the section title style with it and all of those attributes are applied to the text in one fell swoop. No fuss, no mess. And, even better, if you decided later that you really wanted all of those titles to be 18pt instead of 14pt, you just change the definition of section title and it changes the appearance of all of the text marked with that style throughout the document.

Last week we looked at a way to use styles with HTML documents called Cascading Style Sheets (http://www.independent.co.uk/net/ 980407ne/story8.html). Rather than creating a new style name, as you would with a word processor, CSS is used to redefine the attributes of existing HTML tags. The basic syntax for setting up one of these CSS "rules" looks like this:

selector {property: value;}

The selector is the keyword part of an HTML tag (the text in the tag that lets you know what type of tag it is), property is the name of the attribute you want to change, and value is, well, the new value for that property. You can add as many different definitions {property: value} to the rule as you want as long as they are separated by semicolons within the brackets.

Instead of using an HTML tag's selector, though, we can use a class selector to set up a CSS rule with whatever name we want. A class is a "free agent" selector that can be applied to any HTML tag at your discretion. Since they can be applied to multiple HTML tags, a class selector is the most versatile type of selector, however, unlike HTML selectors, it does not automatically apply itself to the document but has to be specified where needed.

Setting up a Cascading Style Sheet rule using a class selector is pretty much like setting one up using an HTML selector. For example, if we wanted to set up a class that would make text bold, right justified, 18pt size, double spaced, and in the Times font it would look something like this:

.className {font: bold 18pt/36pt Times,serif;

text-align: right;}

Here "className" is whatever we want to call this class. Notice, though, that there is a full stop before the class name to let the browser know that this will be a class rule not an HTML rule. Add this code within your of our HTML document thus:

blah...blah...blah...

Now all of the definitions associated with className will be used with this (and only this) paragraph. You could also apply the className class to just about any other HTML tag that you wanted.

I'm sure you are wondering by now what happens if the

tag already has its own CSS rule? That's where the "Cascading" part of CSS enters into the equation. If an HTML tag has more than one definition, and if the definitions conflict, the last one that was specified - in this case the new class rule - will override the previous ones. If the definitions in the rules do not conflict, they simply combine together.

The power of CSS comes from its ability to mix and match different rules from different sources to tailor your Web page layouts to your exact needs.

In some ways this resembles computer "programming", which is not too surprising since a lot of this stuff was created by programmers and not designers. But once you get the hang of it, it will become as natural as putting together a sentence.

Jason Cranford Teague is currently working on 'The Visual Quickstart Guide: Dynamic HTML for the World Wide Web', to be published in June. You can e-mail Jason at:

indy_webdesign@mindspring.com