XHTML 101
Lesson 4 - Part 1
Changing the Font with CSS
One of the primary features of XHTML is that design elements such as fonts,
colors, and layout, are no longer handled by the XHTML tags. Instead, they are
handled with Cascading Style Sheets. Rather than go into CSS in depth here,
we'll just be covering some basics to change fonts and colors. If you would
like to learn more, you should sign up for the
free 5-day CSS class.
Putting your text in paragraphs is fine, but you're left with text that is
pretty boring. Using CSS and in-line styles, you can change your text so that it
looks more like you want it to look.
The first thing we'll learn about is the font-family property. The font family is often
exactly what people think of when they think of the word "font". This is the
actual typeface used on the screen.
You can declare any font that you would like, but remember, if your reader doesn't
have that font installed their browser will try to find a match for it, and their
page will not look as you intended.
To change the family of text, type:
<span style="font-family : arial;">text converted to arial</span>
But sometimes the person viewing your page won't have your font on their system.
To fix this you can specify a list of family names, separated by commas,
for the browser to use in order of preference. Keep in mind that a standard font
on a PC (such as Arial) might not be standard on a Macintosh. So you should
always view your pages with a minimally installed machine (and preferably on
both platforms) to make sure that your page looks as designed even with minimal
fonts.
One of my favorite font sets is font-family : arial, geneva, helvetica, helv;
This set is a sans-serif font collection and while geneva and arial do not look
terribly similar, they are both fairly standard on Macintosh and Windows
computers. I include helvetica and helv for customers on other operating systems
such as Unix or Linux that might not have a robust font library.
This face is times then arial. If you have times, your
browser should choose to display it in times.
<span style="font-family : times,arial;">
This face is arial then times. If you don't have arial,
your browser will display it in the same font as above. But this format is written
using non-valid XHTML.
<font face="arial,times">
This face is verdana, one of About's common
fonts. If your browser doesn't have that, it will display it in times (my second
choice) which is a serif font and very different from verdana.
<span style="font-family : verdana,times;">
More about font-family
|