Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

ptg16476052

126 LESSON 7: Formatting Text with HTML and CSS

than using the style attribute. Later, you’ll see how to use style sheets to control the

appearance of many elements simultaneously.

Font Properties

When you want to modify the appearance of text, the other major family of properties

you can use is font properties. You can use font properties to modify pretty much any

aspect of the type used to render text in a browser. One of the particularly nice things

about font properties is that they’re much more specific than the tags that you’ve seen so

far.

First, let’s look at some of the direct replacements for tags you’ve already seen. The

font-style property can be used to italicize text. It has three possible values: normal,

which is the default; italic, which renders the text in the same way as the <i> tag; and

oblique, which is a slanted version of the standard typeface. Most fonts provide an italic

version, which has letterforms separate from the normal version or an oblique version,

but not both. When you specify that text should be oblique or italic, the browser will

choose whichever of the two is available. If neither variant is installed, the browser wi ll

usually generate its own oblique version of the font. Here are some examples:

<p>Here's some <span style="font-style: italic;">italicized text</span>.</p>

<p>Here's some <span style="font-style: oblique;">oblique text</span>

(which may look like regular italics in your browser).</p>

Now let’s look at how you use CSS to create boldfaced text. In the world of HTML,

you have two options: bold and not bold. With CSS, you have many more options. In

practice, text is either bold or normal. To specify that text should be boldface, the

font-weight property is used. Valid values are normal (the default), bold , bolder,

lighter, and 100 through 900, in units of 100. Here are some examples:

<p>Here's some <span style="font-weight: bold;">bold text</span>.</p>

<p>Here's some <span style="font-weight: bolder;">bolder text</span>.</p>

<p>Here's some <span style="font-weight: lighter;">lighter text</span>.</p>

<p>Here's some <span style="font-weight: 700;">bolder text</span>.</p>

In some cases, computers will have a bold variation of a font, an

italic variation, and a normal variation but not a bold, italic varia-

tion. If you specify that text has a font-weight of bold and a

font-style of italic or oblique, the browser will substitute an

oblique version of the bold font that it creates on the fly, and the

result will often be ugly text. If you are concerned with nice typog-

raphy, make sure to only specify font variations that are normally

installed.

TIP