CSS: The Missing Manual, 2nd Edition

Chapter 6. Formatting Text

Most websites still rely on words to get their messages across. Sure, people like to look at photos, movie clips, and Flash animations, but it’s the reading material that keeps ‘em coming back. People are hungry for Facebook updates, news, gossip, how-to articles, recipes, FAQs, jokes, information lists, and even 140 character tweets. With CSS, you can—and should—make your headlines and body text grab a visitor’s attention as compellingly as any photo.

CSS offers a powerful array of text-formatting options, which let you assign fonts, color, sizes, line spacing, and many other properties that can add visual impact to headlines, bulleted lists, and regular old paragraphs of text (see Figure 6-1). This chapter reveals all, and then finishes up with a tutorial where you can practice assembling CSS text styles and put them to work on an actual web page.

Formatting Text

The first thing you can do to make text on your website look more exciting is to apply different fonts to headlines, paragraphs, and other written elements on your pages. To apply a font to a CSS style, you use the font-family property:

font-family: Arial;

Note

In real life, when you put a CSS property into action, you must, of course, include all the other necessities of a complete style declaration block and style sheet, as described in Chapter 2: p { font-family: Arial; }, for example. When you see examples like font-family: Arial;, remember that’s just the property in isolation, distilled down ...