Applying italics through CSS is fairly straightforward, but we get all kinds of options for bold. Let's take a look.
font-style
font-style is the property you need to control italics, and it's nice and simple:
H3 { font-style: italic }
When a browser is told to make something italic, it will look for an Italic version of the font installed on the user's machine. If there is no such italic font, then the browser will (sometimes) make one up. Usually, this just means giving extra slant to the normal version of the font.
If a font has a version named Oblique instead of Italic, then use oblique as the value of font-style.
A third value for font-style is normal, which will undo any italicizing and make the font appear as normal (nonitalicized) text.
font-weight
Bold is just something you can turn on or off, right? Not anymore. With the font-weight property, a whole new range of boldness becomes possible.
Shown here is the most obvious use of font-weight. A value of bold works just like you would expect. Similarly, a value of normal will make any bold text nonbold.
But you can also specify font-weight using numerical values: 100, 200, ... 900. Normal, nonbold text has a value of 400. Each larger number is at least as bold as the one below it, and 900 is the most-bold version of the font available.
The Web browser decides how bold each value is. For a font with only a normal and a bold face, 100-600 might display as normal, and 700-900 might appear as bold. For a font with nine different weights built in, each number can be displayed differently.
These examples will work only if you have the font on your system and your browser supports CSS:
Of course, this range of numbers is valuable only if you're using a font that has a range of bold values built into it and only if your users have the same font. And be forewarned that browsers don't support these numerical values consistently (and IE 3 doesn't support them at all).
Finally, you can also use values of lighter or bolder for font-weight. These work only if you're using them on an element that already has some level of bold specified. For example, if you apply bolder to an element that is already inheriting boldness from a parent element, then the browser will attempt to make the text even more bold. If there is no bolder version of the font, then the browser won't do anything; it will display the text at the same boldness level as the parent.
(Note: Neither IE 3 nor Netscape Communicator supports lighter or bolder.)
Are you impressed by the range of options? I think you'll like the next collection of special effects.
next page»
