Indenting Paragraphs


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 Values

VALUE

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 &amp; 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.





CSS, DHTML and Ajax. Visual QuickStart Guide
CSS, DHTML, and Ajax, Fourth Edition
ISBN: 032144325X
EAN: 2147483647
Year: 2006
Pages: 230

Similar book on Amazon

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net