Advanced Text Formatting with CSS | Sams Teach Yourself HTML and CSS in 24 Hours (7th Edition)

You've already learned how to use several CSS style properties that allow you to carefully control the formatting of text on your web pages. In addition to the common text-formatting properties that you've already seen, there are several other lesser-used properties worth filing away in your CSS knowledge bank.

First off is the font-variant style property, which can be used to apply a small-caps effect to text. If you aren't familiar with this text effect, it causes all the text in a paragraph to use uppercase characters; capitalized characters are simply displayed larger than other characters when the small-caps effect is applied.

Following is an example of using the font-variant style property:

 <p style="font-variant:small-caps">   This paragraph is in small caps. </p>

The possible values for the font-variant property include none (default) and small-caps. Figure 13.1 shows how this small-caps text appears in a web page.

Figure 13.1. Advanced CSS style properties allow you to alter the capitalization and spacing of text.

Two other interesting text-formatting properties are letter-spacing and word-spacing, which allow you to alter the spacing between individual letters and words. Both of these style properties are specified using standard CSS size units, such as pixels (px).

Following is an example of how to use the letter-spacing style property to add five pixels between each letter in the paragraph:

 <p style="letter-spacing:5px">   This paragraph has its letters spaced apart by 5 pixels. </p>

If you want to control the spacing between words instead of between letters, here's an example of how to use the word-spacing property to add 10 pixels of space between each word:

 <p style="word-spacing:10px">   This paragraph has its words spaced apart by 10 pixels. </p>

Both of the last two examples are shown in Figure 13.1.

The last text-formatting style property of interest here is not quite as commonly used as the others you just saw. However, it is fairly powerful in its own right. I'm referring to the text-transform property, which can be used to automatically transform the case of a paragraph of text. Allowed values for the property include none (default), uppercase, lowercase, and capitalize. The uppercase and lowercase values render text entirely in uppercase or lowercase, respectively, and capitalize capitalizes every word.

Following is an example of how to use the text-transform property to transform a paragraph of text so that every word is capitalized:

 <p style="text-transform:capitalize">   This paragraph has its text transformed so that every word is capitalized. </p>

Figure 13.1 shows the results of this code as well.

Listing 13.1 contains the complete code for the advanced text-formatting page shown in Figure 13.1.

Listing 13.1. CSS Gives You a Surprising Amount of Control over the Formatting of Text

 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">   <head>     <title>Textual Styles</title>   </head>   <body>     <p style="font-variant:small-caps">       This paragraph is in small caps.     </p>     <p style="letter-spacing:5px">       This paragraph has its letters spaced apart by 5 pixels.     </p>     <p style="word-spacing:10px">       This paragraph has its words spaced apart by 10 pixels.     </p>     <p style="text-transform:capitalize">       This paragraph has its text transformed so that every word is capitalized.     </p>   </body> </html>

Keep in mind that you can mix-and-match any of these style properties, as well as all the other font- and text-related properties you've seen throughout the book. In fact, later in the lesson, in the section "Revisiting the Hockey Player Example," you'll see how to use many of the text-formatting properties in conjunction with each other to get interesting text effects.

By the Way

The CSS standard defines more style properties than what you can currently use today. For example, the font-stretch and text-shadow properties are technically part of the standard but have yet to see support in a major web browser. The font-stretch property will eventually allow you to stretch text in a single direction, and the text-shadow property will allow you to apply a drop shadow simply by applying a styleno tricky image editing required!