Formatting Words and Letters

Although you'll spend a lot of time fine-tuning the color, size, and fonts of the text on your Web pages, CSS also lets you apply other common text formatting properties (like bold and italics) as well as some less common ones (like small caps and letter spacing).

Tip

CSS lets you combine multiple text properties, but don't get carried away. Too much busy formatting makes your page harder to read. Worst of all, your hard work loses its impact.

Italicizing and Bolding

Web browsers display type inside the <em> and <i> tags in italicized type, and text inside the <strong>, <b>, <th> (table header), and header tags (<h1>, and so on) in bold type. But you can control these settings yourself—either turn off bold for a headline, or italicize text that normally isn't—using the font-style and font-weight properties.

To italicize text, add this to a style:

 
font-style: italic;

Alternatively, you can make sure text isn't italicized, like so:

	font-style: normal;

Note

The font-style property actually has a third option— oblique—which works identically to italic.

The font-weight property lets you make text bold or not. In fact, according to the rules of CSS, you can actually specify nine numeric values (100-900) to choose subtle gradations of boldness (from super-extra-heavy [900] to ultra-nearly-invisible-light [100]). Of course, the fonts you use must have 9 different weights for these values to have any visible effect for your Web site's visitors. And since ...

Get CSS: The Missing Manual now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.