Recipe 2.14. 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 2-21), whereas stylized quotes are (see Figure 2-22).

Figure 2-21. The default rendering of the text for a pull quote

Figure 2-22. 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 >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.