Break the <FONT ...> Habit

Fonts: we hover over them, worry about them, set and reset them. They define the look and feel of our documents and we give them due attention.

So when Netscape introduced the <FONT ...> tag the web designers of the world embraced it enthusiastically. Finally a chance to make the web pages look the way we want! Big fonts, little fonts, green fonts, fonts with no serifs... overnight the web took on a different look.

Now we've found out what a mess we've gotten ourselves into.

It turns out that <FONT ...> wasn't such a great idea. It's not that setting the appearance of the web page is so bad... everyone wants their pages to look pretty. It's that <FONT ...> has an insidious way of taking over the page. Sure, it's easy at first. A single tag clearly expresses the size, color and face of the text. But then you have to add another identical tag a little later to get the same effect, and then another and another. Soon you find yourself copying and pasting the same code throughout your site just to create a few common font effects.

It's time to break out of this habit. This tutorial will show you how to use styles to create all the font effects you ever wanted, with less work and less code. Yes, styles are a little harder to learn than HTML, but not much, and the learning you put in at the beginning will save you hours of frustration down the road. Style will let you stop wasting time with heaps of code and get back to creating a great web site.

But <FONT ...> Is So Easy

It is at first. Unfortunately, <FONT ...> gets a lot more difficult as you start using it more and more. You have to keep using the same code over and over to get the same effect for different sections of the page. Consider, for example, a situation where you want a special font effect for the anchors in a section of your page. With <FONT ...> you might accomplish that task like this:

<P>
The <FONT FACE="Arial, Helvetica, Geneva" SIZE="+1"><A HREF="library.html">library</A></FONT> 
has an arrangement with the 
<FONT FACE="Arial, Helvetica, Geneva" SIZE="+1"><A HREF="cafeteria.html">cafeteria</A></FONT> 
to provide refreshments during the weekly 
<FONT FACE="Arial, Helvetica, Geneva" SIZE="+1"><A HREF="coffeehouse.html">coffee 
house</A></FONT> lectures. 
</P>

which gives us

The library has an arrangement with the cafeteria to provide refreshments during the weekly coffee house lectures.

Notice that we had to use the same code for each font effect. If you wanted to try a different effect you'd have to go through and change every <FONT ...> tag. The situation gets worse and worse as you build your site and have to maintain multiple pages of font effects.

Now let's consider the styles way of doing font effects. (We'll walk you through the details starting on the next page, for now this is just an overview.) First we create a styles rule with code like this (in a STYLE tag or in a style sheet file):

.resources A
{
font-family:sans-serif;
font-size:120%;
}

This rule creates a class called resources, and says that all <A ...> elements inside that class should has a sans-serif font family (such as Geneva or Arial) and should be 120% larger than usual. We can then apply the rule to a section of the page by using the CLASS attribute:

<P CLASS="resources">
The <A HREF="library.html">library</A> has an arrangement with 
the <A HREF="cafeteria.html">cafeteria</A> to provide refreshments 
during the <A HREF="coffeehouse.html">coffee house</A> lectures. 
</P>

which gives us

The library has an arrangement with the cafeteria to provide refreshments during the coffee house lectures.

Notice that we don't have to do anything special to the <A ...> tags. The anchors automatically get the styles we set. We could add more anchors to the section and they would also get the styles, all without extra font coding.

That's just the tip of the iceberg, but it gives you and idea of how much simpler styles are than the <FONT ...> tag. In the next page we'll help you get started.