Recipe 1.10 Creating a Pull Quote with HTML Text

‚  < ‚  Day Day Up ‚  > ‚  

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.

See Also

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

‚  < ‚  Day Day Up ‚  > ‚  


CSS Cookbook
CSS Cookbook, 3rd Edition (Animal Guide)
ISBN: 059615593X
EAN: 2147483647
Year: 2004
Pages: 154

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net