Styling Text

Setting text styles is one of the most important aspects of cascading style sheets, but the process is not straightforward. Here are some properties that you can use with text:

• float Indicates how text should flow around this element. Set this to left to move the element to the left of the display area and have text flow around it to the right, set it to right to move the element to the right and have text flow around the element to the left, or set it to none .

• font-family Sets the font face. (Note that you can specify a number of options here, separated by commas; the first face available on the user 's system is used.)

• font-size Sets the size of the text's font.

• font-stretch Indicates the desired amount of condensing or expanding in the letters used to draw the text.

• font-style Specifies whether the text is to be rendered using a normal, italic, or oblique face.

• font-variant Indicates whether the text is to be rendered using the normal letters for lowercase characters or rendered using small-cap letters for lowercase characters .

• font-weight Refers to the boldness or lightness used to render the text, relative to other fonts in the same font family.

• font-weight Makes text bold.

• line-height Indicates the height given to each line. Set this to an absolute measurement or a percentage value such as 200% to create double spacing.

• text-align Sets the alignment of text. You can set this to left , right , center , or justify .

• text-decoration Underlines the text. You can set this to underline , overline , line-through , or blink ; to remove inherited decorations, set this to none .

• text-indent Sets the indentation of the first line of block-level elements. Set this to an absolute value, such as 10 pixels, 10px , or 4 points, 4pt .

• text-transform Indicates whether you want to display text in all upper case, all lower case, or with initial letters capitalized. You can set this to capitalize , uppercase , lowercase , or none .

• vertical-align Sets the vertical alignment of text. You can set this to baseline , sub , super , top , text-top , middle , bottom , or text-bottom .

Here's an example that puts some of these properties to use. In this case, I'll specify 18-point (a point is 1/72 of an inch) centered text in italic Arial (or Helvetica, if the browser can't find the Arial font face):

Listing ch09_14.css

 TITLE {display: block; font-size: 24pt; font-weight: bold; text-align: center; text-decoration: underline} AUTHOR {display: block; font-size: 18pt; font-weight: bold; text-align: center} SECTION {display: block; font-size: 16pt; font-weight: bold; text-align: center; font-style: italic}  P {display: block; font-size: 18pt; font-style: italic; font-family:   Arial, Helvetica; text-align: center; margin-top: 10}  

You can see the results in Figure 9-8.

Figure 9-8. Using font properties.

As with many groups of properties, there's a shortcut property that you can use to set the font-style , font-variant , font-weight , font-size , line-height , and font-family properties all at once: the font property. To use this shortcut property, you just specify values for all of these properties (in the order I've given here), separating the font-size and line-height values with a forward slash ( / ) and listing all values without commas (except between font family names , if you list more than one). Here's an example using the font shorthand property:

 TITLE {display: block; font-size: 24pt; font-weight: bold;  text-align: center; text-decoration: underline} AUTHOR {display: block; font-size: 18pt; font-weight: bold; text-align: center} SECTION {display: block; font-size: 16pt; font-weight: bold; text-align: center; font-style: italic}  P {display: block; font: italic normal bold 12pt/10pt arial,   helvetica; text-align: center}  

Most groups of propertiessuch as the font properties, or those you use to set bordershave a shortcut property that lets you set multiple property values at once. I'll list some of these shortcut properties and show you how to use them at the end of this chapter.

Generic Font Selections

As a last resort, you can assign a generic font family to font-family to use in case the user's computer doesn't have the one you specified. The browser will select a font family that's similar. Generic font families include serif, sans serif, cursive , fantasy, and monospace.