Learning PHP, MySQL, JavaScript, and CSS, 2nd Edition

Managing Text Styles

Regardless of the font in use, you can further modify the way text displays by altering its decoration, spacing, and alignment. There is a crossover between the text and font properties, though, in that effects such as italics or bold text are achieved via the font-style and font-weight properties, while others, such as underlining, require the text-decoration property.

Decoration

With the text-decoration property you can apply effects to text such as underline, line-through, overline, and blink. The following rule creates a new class called over that applies overlines to text (the weight of over, under, and through lines will match that of the font):

.over { text-decoration:overline; }

In Figure 18-8 you can see a selection of font styles, weights, and decorations.

Figure 18-8. Examples of the styles and decoration rules available

Spacing

A number of different properties allow you to modify line, word, and letter spacing. For example, the following rules change the line spacing for paragraphs by modifying the line-height property to be 25 percent greater, set the word-spacing property to 30 pixels, and set the letter-spacing to 3 pixels:

p {
    line-height   :125%;
    word-spacing  :30px;
    letter-spacing:3px; }

Alignment

There are four types of text alignment available in CSS: left, right, center, and justify. In the following rule, paragraph text is set to full justification: