Understanding Style Sheets (Part 1) - Adding A Little Style (
Page 6 of 6 )
You can also add emphasis to your text with the "font-style" property,
which takes the values "normal", "oblique" and "italic". Check it out!
<HTML>
<HEAD>
<STYLE TYPE="text/css">
P
{font-family: serif; font-style: italic} /* italic font */
</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>
Speaking of emphasis, the "font-weight"
property allows you to control the level of emphasis either via keywords like
"normal", "bold", "bolder" and "lighter", or via an absolute scale going from
100 to 900. Take a look:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
.question
{font-weight: bolder}
.answer {font-weight: 900}
</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>
And finally, the "font-variant" property allows you to specify the
capitalization of the text - your options are either "small-caps" or "normal".
Note that Netscape doesn't seem to support this property yet.
<HTML>
<HEAD>
<STYLE TYPE="text/css">
P
{font-variant: small-caps} /* replace all lower-case characters
with
upper-case characters */
.</STYLE>
</HEAD>
<BODY>
<P>
Q. How many testers does it take to change a light
bulb?
<P>
A. We just noticed the room was dark; we don't actually
fix the problem.
</BODY>
</HTML>
In the second part of this article, you'll learn how to control margins,
padding, borders, background images and a whole lot more. Make sure you come
back for that one!
/ 32 
