The first in a two-part tutorial on Cascading Style Sheets, thisarticle explains how to create and use style rules across your Web site,and then demosntrates a few basic CSS properties. Also included:inheritance, classes, contextual selectors and some lightbulb jokes.
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:
<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!