DekGenius.com
Previous Section  < Day Day Up >  Next Section

Recipe 1.11 Creating a Pull Quote with Borders

Problem

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

Figure 1-22. A stylized pull quote using borders
figs/csscb_0122.gif


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 7 for several page-layout techniques that take advantage of the float property; Recipe Recipe 1.8 for styling headings with borders; Recipe 10.3 and Recipe 10.4 for more on designing with contrast.

    Previous Section  < Day Day Up >  Next Section