Recipe 1.10 Creating a Pull Quote with HTML Text

Problem

You want to stylize the text for a pull quote so that it is different from the default. Undifferentiated quotes aren't obviously from another writer (see Figure 1-20), whereas stylized quotes are (see Figure 1-21).

Figure 1-20. The default rendering of the text for a pull quote

Figure 1-21. The stylized pull quote

Solution

Use the blockquote element to indicate the pull quote semantically in the markup:

<blockquote>

 <p>Ma quande lingues coalesce, li grammatica del resultant

 lingue es plu simplic e regulari quam ti del coalescent 

lingues.</p>

 <div class="source">John Smith at the movies</div>

</blockquote>

With CSS, apply the margin, padding, and color values to the blockquote element:

blockquote {

 margin: 0;

 padding: 0;

 color: #555;

}

Next, set the style for the p and div elements nested in the blockquote element:

blockquote p {

 font: italic 1em Georgia, Times, "Times New Roman", serif; 

 font-size: 1em;

 margin: 1.5em 2em 0 1.5em;

 padding: 0;

}

blockquote .source {

 text-align: right;

 font-style: normal;

 margin-right: 2em;

}

Discussion

A pull quote is used in design to grab a reader's attention so that he will stick around and read more. One easy way to create a pull quote is to change the color of a portion of the main text. Improve on this by adding contrast: change the generic font family of the pull quote so that it is different from that of the main text. For example, if the main text of a web document is set in sans-serif, set the pull quote text to a serif font.