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).

The default rendering of the text for a pull quote

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

The stylized 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.

See Also

Recipe 1.11 and Recipe 1.12 for more information on designing pullquotes with CSS.

Get CSS Cookbook now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.