Text-Based Attributes | Dynamic HTML in Action

The attributes we have covered so far allow us to control the appearance of individual characters. Certain other CSS attributes allow you to change how groups of characters display. They include text-decoration, text-transform, text-align, text-indent, letter-spacing, and line-height. The color attribute is also commonly used with text. Code Listing 12-2 demonstrates how these attributes work; you can see the results in Figure 12-4.

Code Listing 12-2.

 <HTML> <HEAD> <TITLE>Listing 12-2</TITLE> <STYLE>   DIV {      text-align: justify;      text-indent: 2em    }   SPAN {     text-decoration: underline;     text-transform: uppercase;     vertical-align: super;     letter-spacing: .5em;     line-height: 200%;     color: red   } </STYLE> </HEAD> <BODY> These first two sentences are just standard text that has no  custom style. We have created style rules for SPAN and DIV  elements. <HR> Some more standard text. <SPAN>This text uses the custom SPAN style we created.</SPAN> <HR> More standard text. <DIV> This whole paragraph is inside a DIV element. <SPAN>This  sentence is in a SPAN, which is in the DIV.</SPAN> This  paragraph demonstrates that DIV is a block element and SPAN  is an in-line element. Notice how the styles interact. </DIV> </BODY> </HTML>

click to view at full size.

Figure 12-4. An example of using CSS attributes to format text.

Code Listing 12-2 uses both SPAN and DIV elements. Both elements are very useful when working with styles, and the difference between the two is important. SPAN is an in-line element. This means that a SPAN element can be embedded in text without causing a line break; it flows with the paragraph just like the rest of the text in the paragraph. Some other common in-line elements are B (boldface), U (underline), and I (italic). In contrast, DIV is a block element. Block elements do not flow with the rest of the text in a paragraph. Instead, the DIV element is treated as a separate block of text and essentially becomes its own paragraph. Some other common block elements are P (paragraph), HR (horizontal rule), TABLE, and list elements such as UL, OL, and LI. Each of these causes a line break before it. Neither DIV nor SPAN elements visibly format characters, unlike most other elements, like B or LI. Code Listing 12-2 uses a DIV element because the text-align and text-indent attributes work only on block elements.

NOTE
Many CSS attributes apply only to block elements. Detailed descriptions of most attributes, including their effects on in-line and block elements, can be found on the SBN Workshop Web site and on the CD that accompanies this book. On the CD, go to Workshop (References); DHTML, HTML, & CSS; CSS; CSS Attributes Reference. To get to the online version, visit the MSDN Online Resource page at msdn.microsoft.com/resources/schurmandhtml.htm, or open the file named MSDN_OL.htm on the companion CD and choose CSS Attributes. To learn more about CSS, visit the site www.w3.org/Style/. The CSS1 specification itself can be found at www.w3.org/TR/REC-CSS1.

The text-align attribute controls the alignment of a block of text (such as a DIV element or a P element). You can set this attribute to left, right, center, or justify. The left setting left-justifies the text (aligns the lines of text evenly along the left edge of the text block), whereas the right setting right-justifies it. The center setting centers each line of text individually within the text block. Setting text-align to justify spaces out the text so that both the left and right indents are even (as you see in the normal text in this book).

The text-indent attribute determines how far the first line of the text block is indented. This attribute accepts standard units of measurement such as em and px as well as percentages. You can even assign a negative value, which results in a hanging indent. This attribute is especially handy when used with the P element, because it allows you to create a first-line indent for every new paragraph on a Web page.

Code Listing 12-2 also includes five other formatting attributes. The first, text-decoration, can be set to underline, overline, line-through, blink, or none. The underline, overline, and line-through settings cause lines to be drawn through the text at various heights (under, over, or through the text). Overline is not supported by Netscape Navigator 4. Though CSS provides for it, the blink setting is not rendered by Internet Explorer 4 or 5. You can set text-decoration to none to turn off any existing decorations in your text. For example, the following style definition for the anchor element (A) turns off the underline normally found beneath a hyperlink:

 A {text-decoration: none}

The text-transform attribute controls the capitalization of text. The applicable values and their effects are as follows:

capitalize	Capitalizes the first letter of every word
uppercase	Capitalizes every letter of every word
lowercase	Lowercases all letters of all words
none	Resets any inherited capitalization; reverts to original setting.

The vertical-align attribute lets you set text to be either subscript or superscript. Its two possible settings are sub and super. This attribute does not allow you to set the exact distance the text is moved from the baseline. For this functionality, use relative positioning, described in the next chapter.

The letter-spacing attribute controls the distance between each letter in the text and is normally expressed in units of either px or em. The em unit is especially useful here because it changes the letter spacing relative to the size of the font in use.

Because setting the line-height attribute determines the overall size of the line of text, including the space above and below the characters, it has the effect of setting the line spacing. You can set this attribute by specifying a length (commonly in points or in ems, though any supported unit of measurement will work), a percentage, or a number of lines. (Numbers with decimal places are OK.) Thus, the following style definitions have the same effect:

 DIV {font-size: 10pt; line-height: 20pt} DIV {font-size: 10pt; line-height: 2em} DIV {font-size: 10pt; line-height: 2} DIV {font-size: 10pt; line-height: 200%}

The final attribute we used in Code Listing 12-2, color, sets the color of our text. You can set this attribute to one of the predefined colors in the color table, such as black or red. (The full color table appears on the SBN Workshop Web site and on the CD that accompanies this book. On the CD, go to Workshop (References); DHTML, HTML & CSS; DHTML References; Color Table. To get to the online version, visit the MSDN Online Resource page at msdn.microsoft.com/resources/schurmandhtml.htm, or open the file named MSDN_OL.htm on the companion CD and choose DHTML Color Table.) You can also use a setting expressed as either an RGB decimal triplet or an RGB hexadecimal triplet. RGB triplets let you specify values for the red, green, and blue components of the color, with each component set to a value in the range 0 through 255 decimal, or 00 through ff hexadecimal. Thus, the following three style definitions achieve identical results:

 SPAN {color: blue} SPAN {color: rgb(0,0,255)} SPAN {color: #0000ff}