How to customize font style in a web page?

[Felix]

Hi there,

in a web page, ususally Times (aka TimesNewRoman) is the default font.

How can I set the font for my page to, say, Arial?

I can do it for a single cell in a table or for a text snippet, using the font face tag: < font face = "Arial" > Text Snippet < /font >

When I put the font face tag right inside the body and /body tags, the text style of the whole page flips to Arial only when viewing with IE. It doesn't work with Netscape. How can I make it work also with Netscape?

Any help is highly appreciated. Thanx

[mairving]

Using font tags is not the way to go. As you can see, the font face only works in IE, Opera and I think NS 6. The best way to do so is to use a stylesheet. You have great control with stylesheets. You have 3 options with stylesheets. You have an internal stylesheet, an imported stylesheet, and a linked stylesheet. Personal preference is to use a linked stylesheet, since you can make global changes to your site this way. Basically you can control the way your hyperlinks, paragraphs, table cells, headers, etc look.

There are a couple of good ways to learn how to use stylesheets. I mostly learned by looking at other stylesheets that were in my cache. These are external stylesheets with a .css extension. They are referenced in a web page like this in the head section:
<LINK rel="STYLESHEET" type="text/css" href="stylesheetname.css">

So if you wanted to control the font and layout of your paragraph your would have something like this:
P { font-family: verdana, helvetica, arial, geneva, lucida, sans-serif; color:#000000; font-size:12px; text-indent:24px }
This says that any time you use the <P> tag, it will first look for the verdana font, if not found, then helevetica, etc. You also specify the color, size and in this case, I use a text-indent. I prefer to specify the font size in pixels rather than points since it looks better.

You can also create classes in stylesheets like this:
P.red { font-family: verdana, helvetica, arial, geneva, lucida, sans-serif; color:#FF0000; font-size:12px}
What this does is that any time you use this:
<P class="red"> , you will have a red 12px font with no text indent.

If you notice, each section is enclosed by {} and each division within those brackets is separated by ; .

That is basically how stylesheets work. For more info check theses sites:
Glish
W3c.org

You can also download a free stylesheet editor here . All you need is a text editor but this can help out with some of the obscure tags.

Anyway, I can email you a stylesheet example with the page that it is linked to if you want.

[Felix]

thank you mairving, great tutoruial and great links! I've fiddled a bit "quick and dirty" with one page and it seems to work. That's fine for the moment, while I'll stay with the table layout, while CSS has the potential also to handle this... maybe in the future, when we've got rid of the Netscape 4.7 at work.

thanx again!