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*/
Next: Adding A Little Style >>
More Style-Sheets Articles
More By icarus, (c) Melonfire
/ 31 
