CSS Cookbook, 2nd Edition

Problem

You want to stylize a pull quote with borders on the top and bottom, as in Figure 2-23.

To put borders on the left and right, instead of the top and bottom, use the border-left and border-right properties:

border-left: 1em solid #999; border-right: 1em solid #999;

Solution

Use the blockquote element to mark up the pull quote content:

<blockquote> <p>&laquo;Ma quande lingues coalesce, li grammatica del.&raquo;</p> </blockquote>

Next, set the CSS rules for the border and text within the pull quote:

blockquote { float: left; width: 200px; margin: 0 0.7em 0 0; padding: 0.7em; color: #666; background-color: black; font-family: Georgia, Times, "Times New Roman", serif; font-size: 1.5em; font-style: italic; border-top: 1em solid #999; border-bottom: 1em solid #999; } blockquote p { margin: 0; padding: 0; text-align: left; line-height: 1.3em; }

Discussion

Set the float property as well as the width property for the blockquote element. These two CSS properties allow the main content to wrap around the pull quote:

float: left; width: 200px;

Contrast the pull quote with the surrounding text by changing the quote's foreground and background colors:

color: #666; background-color: black;

Use the border-top and border-bottom properties to match the color of the text in the pull quote:

border-top: 1em solid #999; border-bottom: 1em solid #999;

See Also

Chapter 9 for several page-layout techniques that take advantage of the float property; Recipe 2.12 for styling headings with borders; Recipes 12.3 and 12.4 for more on designing with contrast.