HTML Codes

Fonts

getting Started

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 they 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

<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.

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:

<PCLASS="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.

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 .

Fonts

getting Started