Previous Section  < Day Day Up >  Next Section

Recipe 1.16 Styling the First Line of a Paragraph

Problem

You want to set the first line of a paragraph in boldface, as in Figure 1-30.

Figure 1-30. The first line set to bold
figs/csscb_0130.gif


Solution

Use the :first-line pseudo-element to set the style of the first line:

p:first-line {

 font-weight: bold;

}

Discussion

Just like a class selector, a pseudo-element enables you to manipulate the style of parts of a web document. Unlike a class selector, however, resizing a browser window or changing the size of the font can change the area marked by a pseudo-element. In this Solution, the amount of text in the first line can change if the browser is resized, as shown in Figure 1-31.

Figure 1-31. The amount of text changing when the browser is resized
figs/csscb_0131.gif


See Also

The CSS 2.1 specification for the :first-line pseudo-element at http://www.w3.org/TR/CSS21/selector.html#first-line-pseudo.

    Previous Section  < Day Day Up >  Next Section