Indenting the first word of a paragraph several spaces (traditionally, five) is the time-honored method of introducing a new paragraph. On the Web, however, indented paragraphs haven't worked because most browsers compress multiple spaces into a single space. Instead, paragraphs have been separated by an extra line break. With the text-indent property (Table 4.9), you can specify extra horizontal space at the beginning of the first line of text in a paragraph (Figure 4.8). You may want to collapse the paragraph margin, in addition, since that space is no longer needed to indicate a new paragraph. Table 4.9. Text-Indent ValuesVALUE | COMPATIBILITY |
---|
<length> | IE3, FF1, S1, O3.5, CSS1 | <percentage> | IE3, FF1, S1, O3.5, CSS1 |
Figure 4.8. Paragraphs stand out better when they are indented, but the extra white space between them becomes redundant. To define text indentation: 1. | text-indent: Type the text-indent property name, followed by a colon (:), in the CSS definition list (Code 4.8).
Code 4.8. The code tells each paragraph using the copy class to indent 2em. [View full width] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/ DTD /xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>CSS, DHTML & Ajax | Indenting Paragraphs</title> <style type="text/css" media="screen"> <!-- body { font-size: 1.2em; font-family: Georgia, "Times New Roman", times, serif; } p.copy { text-indent: 2em; margin: 0px; } --> </style> </head> <body> <div > <h1>Alice's Adventures in Wonderland</h1> <p >Lewis Carroll</p> <h2>CHAPTER VII<br /> <span >A Mad Tea-Party</span></h2> </div> <p >There was a table set out under a tree in front of the house, and the March Hare and the Hatter were having tea at it: a Dormouse was sitting between them, fast asleep, and the other two were using it as a cushion, resting their elbows on it, and talking over its head. 'Very uncomfortable for the Dormouse,' thought Alice; 'only, as it's asleep, I suppose it doesn't mind.'</p> </body> </html> | | 2. | 2em; Type a value for the indent, using either of these options:
A length value, such as 2em. This amount will create a nice, clear indent. See "Values and Units Used in this Book" in the Introduction for more details. A percentage value, which indents the text proportionate to the parent's (paragraph) width (10%, for example). | Tips If you are using indentation to indicate paragraphs, you can set the margin of a paragraph to 0 to override the <p> tag's natural tendency to add space between paragraphs. Because indenting is more common in the print world than online, you may want to consider using indents only for the printer-friendly versions of your page. |