Understanding Style Sheets (Part 1) - Playing With Type (
Page 5 of 6 )
How about changing those fonts
around a little? Well, CSS comes with a whole bunch of properties whose sole
raison d'etre is to give you more control over typeface. The first of these is
the "font-family" property, which allows you to specify the font to be used when
rendering a particular block of text.
<HTML>
<HEAD>
<STYLE TYPE="text/css">
P
{font-family: "Verdana"}
</STYLE>
</HEAD>
<BODY>
<P CLASS="question">
Q. How many testers does it take to change a
light bulb?
<P CLASS="answer">
A. We just noticed the room was dark;
we don't actually fix the problem.
</BODY>
</HTML>
You probably already know that if the font specified isn't available on the
client computer, the browser will use the default font (usually Times New
Roman). And here's where CSS scores over the <FONT> tag - it allows you to
specify a list of alternative fonts in the style definition.
P {font-family: "Verdana", "Arial", "Arial Black"} /* first try
Verdana,
then Arial, then Arial Black */
You have the option of using a generic class of typeface - pick from "serif",
"sans-serif", "monospace", "cursive" and "fantasy". Try it and see for yourself.
P {font-family: serif} /* font of type "serif" */
You also have a number of options when deciding font size, since the CSS
"font-size" property allows you to specify the size of your typeface in a number
of different ways.First, there are absolute sizes, which are usually one of the
following seven values: "xx-small", "x-small", "small", "medium", "large",
"x-large" and "xx-large". Try this example out to see how this works:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
.question
{font-size: xx-small}
.answer {font-size: x-large}
</STYLE>
</HEAD>
<BODY>
<P CLASS="question">
Q. How many testers does it take to change a
light bulb?
<P CLASS="answer">
A. We just noticed the room was dark;
we don't actually fix the problem.
</BODY>
</HTML>
Next, there are relative sizes, which allow you to specify a font "larger" or
"smaller" than the size of the surrounding text.
.question {font-size: larger} /* font size larger than the parent
element
*/
.question {font-size: smaller} /* font size smaller than the parent
element
*/
You can also specify an actual size in terms of points or percentages, like
this:
.question {font-size: 16pt} /* font size is 16 points */
.question {font-size: 300%} /* font size is three times larger than
usual*/
/ 32 
