WPDFD Issue #49 - April 01, 2002

Taking a sneak-peek behind the scenes at some popular Web sites shows me that the dreaded <font> tag is still alive and kicking. It's strange, considering that it has been on 'death-row' for some time and is liable to be banished from new browsers any day now. Well, come to think of it, maybe it's not so strange after all. The preferred alternative, the 'Cascading Style Sheet', is not as easy to use or as reliable as it should be.

Cascading Style Sheets

Let's forget the 'cascading' part for the minute and start with the easier bit. 'Style' is a word that means many things to various people. It can make a difference to the clothes you wear or the type of car you drive. In typography, style can be traditional, grid 'n' grot, avant garde, grunge or many other things but, in essence, it describes the overall 'look and feel' of a page. In CSS, style has a more basic meaning.

Family Affairs

If your parents both had red hair and green eyes, then it is very likely that you and your brothers and sisters have them too. There is also a pretty good chance that some of your children will have the same family characteristics. They will have inherited them. Inheritance also plays a major part in the way that styles work on a Web page. Think of the <body> of the page as being the parent.

This is a page that shows a basic HTML page that is all structure and no style. It has a <h1> at the top, a <h3> below that, some body text, a numbered list and a table. Whatever you see here is down to your default browser settings entirely.

Here, I've just added a 'body' style into the <head> ... </head> section of the page. This is a fairly ordinary style, but serves its purpose. It goes like this: - 1. <style type="text/css" media="screen"><!-- 2. body 3. { 4. font-size:0.8em; 5. line-height:1.4em; 6. font-family: Georgia, "Times New Roman", Times; 7. background-color:#fffff1; 8.

Using exactly the same HTML as the two previous examples but the style properties change slightly to give a completely different look and feel to the page. This time I have used pixel measurements for the font-size and line-height, which means they are 'fixed' and will not change in different browsers. If you need them to change, to work at the maximum number of screenvsizes and resolutions, stick to ems.

Follows on from Three by additionally specifying how the <h1>, <h3>, <ol>, <td>, and <tr> should behave. Now, I have reverted to the more usual 'all in one line' layout for compactness. h1 {color: white; font-weight: bold; font-size: 24px} h3 {color:#f6f; font-weight:normal; font-size: 18px} ol {color:#6f3} tr, td {color:#ff6; font-size: 12px; line-height:24px; font-family: Verdana, Geneva, Arial, Helvetica} a:link {color:white; text-decoration:none; background-color:transparent} a:visited {color:#ccf; text-decoration: none; background-color: transparent} a:hover {color:#6f3; text-decoration: none; background-color: transparent} Here, I have over-ridden the default settings for <h1> and <h3> by specifying different colors and weights.

Adobe GoLive 6.0

For more experienced Web designers, Adobe GoLive is the only serious competitor to Macromedia's Dreamweaver. Which one is best for you depends very much on the type of designer you are and the kind of work you get involved in. I, like many other graphic designers, prefer the more visual approach offered by GoLive's drag and drop interface but Dreamweaver has had the upper hand for creating certain types of sites with dynamic content.

CSS Font Specs

There isn't a lot of choice when it comes to specifying fonts for a Web site, everybody sticks to the same tried and trusted ones. The most common set of fonts are the various sans-serifs that can be found on any Windows or Mac machine plus a default 'sans-serif' spec that works on other platforms. What isn't generally appreciated is that the order you put these fonts in can make quite a difference and there are a few less common fonts that you can use too.