Recipe 2.15. Creating a Pull Quote with Borders

Problem

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

Figure 2-23. A stylized pull quote using borders

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.