Section 6.4. Formatting Entire Paragraphs | Dreamweaver CS3: The Missing Manual

6.4. Formatting Entire Paragraphs

Rather than individual words, some CSS properties apply to chunks of text. You can use the properties in this section on complete paragraphs, headlines, and so on.

6.4.1. Adjusting the Space Between Lines

In addition to changing the space between words and letters , CSS lets you adjust the space between lines of text using the line-height property. The bigger the line height, the more space that appears between each line of text (see Figure 6-6).

Figure 6-6. The line-height property lets you spread a paragraph's lines apart or bring them closer together. The normal setting is equivalent to 120 percent, so a smaller percentage tightens up the lines (top), while a larger percentage pushes them apart (bottom).

6.4.1.1. Line spacing by pixel, em, or percentage

Just as with the font-size property, you can use pixels, ems, or percentages to set the size of line height:

 line-height: 150%;

In general, percentages or ems are better than pixels, because they change according to, and along with, the text's font-size property. If you set the line height to 10 pixels, and then later adjust the font size to something much larger (like 36 pixels), because the line height remains at 10 pixels, then your lines overlap. However, using a percentage (150 percent, say) means the line-height spacing adjusts proportionally whenever you change the font-size value.

The normal line-height setting for a browser is 120 percent. So, when you want to tighten up the line spacing, use a value less than 120 percent. To spread lines apart, use a value greater than 120 percent.

Note: To determine the amount of space that appears between lines of text, a Web browser subtracts the font size from the line height. The resultcalled leading is the amount of space between lines in a paragraph. Say the font size is 12 pixels, and the line height (set to 150 percent) works out to 18 pixels. 18 minus 12 equals 6 pixels, so the browser adds 6 pixels of space between each line.

6.4.1.2. Line spacing by number

CSS offers one other measurement method specific to line height, which is simply a number. You write it like this:

 line-height: 1.5;

There's no unit (like em or px) after this value. The browser multiplies this number by the font size to determine the line height. So if the text is 1em and the line-height value's 1.5, then the calculated line height is 1.5em. In most cases, the effect's no different from specifying a value of 1.5em or 150 percent. But sometimes this multiplication factor comes in handy, especially since nested tags inherit the line-height value of their parents.

For example, say you set the line-height property of the <body> tag to 150 percent. All tags inside the page would inherit that value. However, it's not the percentage that's inherited; it's the calculated line-height. So, say the font size for the page is set to 10 pixels; 150 percent of 10 is 15 pixels. Every tag would inherit a line-height of 15 pixels, not 150 percent. So if you happened to have a paragraph with large, 36 pixel text, then its line-height15 pixelswould be much smaller than the text, making the lines squish together in a hard-to-read mess.

In this example, instead of using a line-height of 150 percent applied to the <body> tag, you could have all tags share the same basic proportional line-height by setting the line-height to 1.5. Every tag, instead of inheriting a precise pixel value for line height, simply multiplies its font size by 1.5. So in the above example of a paragraph with 36 pixel text, the line-height would be 1.5 x 36 or 54 pixels.

6.4.2. Aligning Text

One of the quickest ways to change the look of a Web page is with paragraph alignment. Using the text-align property, you can center a paragraph on a page, align the text along its left or right edge, or justify both left and right edges (like the paragraphs in this book). Normally, text on a page is left aligned, but you may want to center headlines to give them a formal look. Languages that read from right to left, like Hebrew and Arabic, require right-alignment. To change the alignment of text, use any of the following keywords left, right, justify, center :

 text-align: center;

Justified text looks great on a printed pagemainly because the fine resolution possible with printing allows for small adjustments in spacing. This fine spacing prevents large, unsightly gaps or rivers of white space flowing through the paragraphs. Web pages are limited to much coarser spacing because of the generally low-resolution of monitors . So when you use the justify option, the space between words can vary significantly from line to line, making the text harder to read. When you want to use the justify option on your Web pages, test it thoroughly to make sure the text is attractive and readable.

POWER USERS' CLINIC
A Shorthand Method for Text Formatting

Writing one text property after another gets tiring, especially when you want to use several different text properties at once. Fortunately, CSS offers a shorthand property called font , which lets you combine the following properties into a single line: font-style (Section 6.3.2), font-variant (Section 6.3.2.1), font-weight (Section 6.3.2), font-size (Section 6.3.2), line-height (Section 6.4) and font-family (Section 6.1.1). For example, the declaration font: italic bold small-caps 18px/150% Arial, Helvetica, sans-serif ; creates bold, italicized type in small caps, using 18px Arial (or Helvetica or sans-serif) with a line height of 150 percent. Keep these rules in mind:

You don't have to include every one of these properties, but you must include the font size and font family: font: 1.5em Georgia, Times, serif ;.
Use a single space between each property value. You use a comma only to separate fonts in a list like this: Arial, Helvetica, sans-serif .
When specifying the line height, add a slash after the font size followed by the line-height value, like this: 1.5em/150% or 24px/37px .
The last two properties must be font-size (or fontsize/line-height ) followed by font-family, in that order. All the other properties may be written in any order. For example both font: italic bold small-caps 1.5em Arial ; and font: bold small-caps italic 1.5em Arial ; are the same.

Finally, omitting a value from the list is the same as setting that value to normal. Say you created a <p> tag style that formatted all paragraphs in bold, italics, and small caps with a line height of 2000 percent (not that you'd actually do that). If you then created a class style named, say, .special-Paragraph with the following font declaration font: 1.5em Arial ; and applied it to one paragraph on the page, then that paragraph would not inherit the italics, bold, small caps, or line-height. Omitting those four values in the .specialParagraph style is the same as writing this: font: normal normal normal 1.5em/normal Arial/ ;.

6.4.3. Indenting the First Line and Removing Margins

In many books, the first line of each paragraph is indented. This first-line indent marks the beginning of a paragraph when there are no spaces separating paragraphs. On the Web, however, paragraphs don't have indents but are instead separated by a bit of spacelike the paragraphs in this book.

If you have a hankering to make your Web pages look less like other Web pages and more like a handsomely printed book, take advantage of the CSS text-indent and margin properties. With them, you can add a first-line indent and remove (or increase) the margins that appear at the beginning and ends of paragraphs.

6.4.3.1. First-line indents

You can use pixel and em values to set the first-line indent like this:

 text-indent: 25px;

 text-indent: 5em;

A pixel value's an absolute measurementa precise number of pixelswhile an em value specifies the number of letters (based on the current font size) you want to indent.

Tip: You can use negative text-indent values to create what's called a hanging indent where the first line starts further to the left than the other lines in the paragraph. (Think of it as "hanging" off the left edge.)

You can also use a percentage value, but with the text-indent property, percentages take on a different meaning than you've seen before. In this case, percentages aren't related to the font size; they're related to the width of the element containing the paragraph. For example, if the text-indent is set to 50 percent, and a paragraph spans the entire width of the Web browser window, then the first-line of the paragraph starts half the way across the screen. If you resize the window, both the width of the paragraph and its indent change. (You'll learn more about percentages and how they work with the width of elements in Section 7.5.1.)

6.4.3.2. Controlling margins between paragraphs

Many designers hate the space that every browser throws in between paragraphs. Before CSS, there was nothing you could do about it. Fortunately, you can now tap into the margin-top and margin-bottom properties to remove (or, if you wish, expand) that gap. To totally eliminate a top and bottom margin, write this:

 margin-top: 0; margin-bottom: 0;

To eliminate the gaps between all paragraphs on a page, create a style like this:

 p {     margin-top: 0;     margin-bottom: 0; }

As with text-indent, you can use pixel or em values to set the value of the margins. You can also use percentages, but as with text-indent, the percentage is related to the width of the paragraph's containing element. Because it's confusing to calculate the space above and below a paragraph based on its width, it's easier to stick with either em or pixel values.

Tip: Because not all browsers treat the top and bottom margin of headlines and paragraphs consistently, it's often a good idea to simply zero out (that is, eliminate) all margins at the beginning of a style sheet. To see how this works, turn to Section 14.3.

For a special effect, you can assign a negative value to a top or bottom margin. For example a -10px top margin moves the paragraph up 10 pixels, perhaps even visually overlapping the page element above it. (See the main headline in Figure 6-1 for an example.)

6.4.4. Formatting the First Letter or First Line of a Paragraph

CSS also provides a way of formatting just a part of a paragraph using the :first-letter and :first-line pseudo-elements. Technically, these aren't CSS properties, but types of selectors (Section 3.1) that determine what part of a paragraph CSS properties should apply to. With the :first-letter pseudo-element, you can create an initial capital letter to simulate the look of a hand-lettered manuscript. To make the first letter of each paragraph bold and red you could write this style:

 p:first-letter {     font-weight: bold;     color: red; }

To be more selective and format just the first letter of a particular paragraph, you can apply a class style to the paragraph .intro , for exampleand create a style with a name like this: .intro:first-letter .

The :first-line pseudo element formats the initial line of a paragraph (see Figure 6-7). You can apply this to any block of text like a heading ( h2:first-line )or paragraph ( p:first-line ). As with :first-letter , you can apply a class to just one paragraph and format only the first line of that paragraph. Say you wanted to capitalize every letter in the first line of the first paragraph of a page. Apply a class to the HTML of the first paragraph< p class="intro" >and then create a style like this:

 .intro:first-line { text-transform: uppercase; }