WEB DESIGN

When developers started clamouring for greater control over page design, Cascading Style Sheets were introduced to fill the void left unfilled by straight HTML

A lot of designers coming to the World Wide Web started out designing for print. Although the days of wet ink and image trapping may be far behind you, wouldn't it be nice to have that same precise control over the text in a Web page that you had with printed paper? HTML gives you limited control over layout with tags such as

and

, but if those were the only options you had with PageMaker or QuarkXpress, we would all still be using the letter press.

So when Web developers started clamouring for the World Wide Web Consortium to add greater control over Web page design, Cascading Style Sheets were introduced to fill the void left unfilled by straight HTML. But, you are probably thinking, "Oh, great, just when I learn HTML, they go and change everything." But never fear. CSS is as easy to use as HTML. In fact, in many ways it is easier because it works directly with HTML tags to tell them how to behave.

Take the humble bold tag, for example. It does one thing: it makes text darker. But by using Cascading Style Sheets we can "redefine" the bold tag so that it not only makes text darker but also displays its text in a larger point size, underlined and in a particular font. We could even make the bold tag not make text bold.

Setting up a list of definitions for a particular HTML tag, called a CSS rule, is pretty simple. Either in the head of your document or in an external text file that is then linked to your document, type in the HTML tags selector (the letters that defines what tag it is), a bracket, the property you want to define with a colon and a value for that property (the property and value together are called the definition), a semicolon and, finally, a closing bracket.

So, for example, if we wanted to set the font for all paragraph,

, tags in our document to Times, it would look something like this:

P font-family: Times, serif;

Put this into the head of your HTML document and away you go. Simple, no? You can do this virtually to any HTML tag in your vocabulary, and add as many different definitions to a single tag as you like. You could also put this CSS rule into a text file (sans the

There are dozens of different properties that you can set for a tag using CSS:

Font Properties Not only can you change the font face but also control the size in points (rather than the ambiguous 1-7 that HTML allows), or set the text to be bold, italic or minicaps.

Text Layout Properties Control leading and kerning as well as alignment. Not only that, you can finally have indented paragraphs.

Background Properties Not only the backgrounds behind the entire page, but behind and tag on the screen. Have one background behind paragraphs and a different one behind the header tags.

Margin Properties Set margins, padding and borders around your paragraphs, tables, images or other elements on the screen.

Other stuff ... You can position text or graphics exactly where you want them in the screen. In addition, CSS is the cornerstone of Dynamic HTML in both Internet Explorer 4.0 and Navigator 4.0.

So, Cascading Style Sheets gives us control over our document's appearance, but the big advantage of using CSS, over just creating new HTML tags to do the same job, is that by changing a definition in a single centrally located CSS rule, you change the appearance of all of the tags controlled by that rule. If the rule is in the head of a particular document, the change will affect that page. If the rule is in an external file, the changes will affect every page that file is linked to, potentially an entire Web site.

On the down side, there are still a lot of browsers being used today that won't understand CSS. Fortunately, these browsers will just ignore the CSS code and display the code as if it didn't exist. It may not look as good without CSS, but at least it won't look any worse.

For more details on using CSS, I recommend the Web Design Group's excellent Guide to Cascading Style Sheets (http://www.htmlhelp.com/reference/css/).

Jason Cranford Teague is currently working on 'The Visual Quickstart Guide: Dynamic HTML for the World Wide Web', which will be available in June. You can e-mail Jason at indy_webdesign @mindspring.com