Creating pull quotes in CSS

Required files styling-semantic-text-2.html, styling-semantic-text-2.css,
quote-open.gif, and quote-close.gif from the chapter 3 folder.
What you’ll learn How to create a magazine-style pull quote, which can draw the
user’s attention to a quote or highlight a portion of an article.
Completed files pull-quote.html and pull-quote.css from the chapter 3 folder.

1. Add the HTML. The required markup for a basic pull quote is simple, centering
around the blockquote element and nesting a paragraph within. Add the following
to the web page, above the code <h2>Curabitur sit amet risus</h2>:
<blockquote>
<p>This is the pull quote. It's really very exciting, so read it now!
å Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</blockquote>
2. Style the blockquote element. Create a blockquote rule and use the background
property to add the open quote image as its background. Set vertical margins that
are larger than the margins between the paragraphs (to ensure that the pull quote
stands out from the surrounding text) and the horizontal margins (to ensure that
the pull quote doesn’t span the entire column width, which also helps it visually
stand out).
blockquote {
background: url(quote-open.gif) 0 0 no-repeat;
margin: 2.4em 2em;
}
3. Style the pull quote paragraph text. Using the contextual selector blockquote p,
style the paragraph text within the blockquote element. Making the text bold and
larger than the surrounding copy helps it stand out—but to ensure it doesn’t
become too distracting, knock back its color a little.blockquote p {
color: #555555;
font-size: 1.3em;
font-weight: bold;
text-align: justify;
}4. Use the background property to add the closing quote mark, which is added to the
paragraph, since you can only add one background image to an element in CSS.
The background’s position is set to 100% 90%—far right and almost at the bottom.
Setting it at the absolute bottom would align the closing quote with the bottom of
the leading under the last line of the paragraph text; setting the vertical position
value to 90%, however, lines up the closing quote with the bottom of the text itself.
blockquote p {
color: #555555;
font-size: 1.3em;
font-weight: bold;
text-align: justify;
background: url(quote-close.gif) 100% 90% no-repeat;
}
5. Tweak the positioning. If you test the page now, you’ll see the paragraph content
appearing over the top of the background images. To avoid this, padding needs to
be applied to the quote mark to force its content inward, but still leave the background
images in place. Since the quote images are both 23 pixels wide, a horizontal
padding value of 33px provides room for the images and adds an additional 10
pixels so that the content of the paragraph doesn’t abut the quote marks. Finally,
the default margin-bottom value for paragraphs is overridden (via a 0 value), since
it’s redundant here.
blockquote p {
color: #555555;
font-size: 1.3em;
font-weight: bold;
text-align: justify;
background: url(quote-close.gif) 100% 90% no-repeat;
padding: 0 33px;
margin-bottom: 0;
}
The following image shows your pull quote page so far.
WORKING WITH TYPE

 

6. Next, credit the quotation. To add a credit to the quote, add another paragraph,
with a nested cite element, inside which is the relevant content.
<blockquote>
<p>This is the pull quote. It's really very exciting, so read it now!
å Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p><cite>Fred Bloggs</cite></p>
</blockquote>
7. In CSS, add the following rule:
cite {
background: none;
display: block;
text-align: right;
font-size: 1.1em;
font-weight: normal;
font-style: italic;
}
8. Some of the property values in cite are there to override the settings from blockquote
p, and to ensure that the second paragraph’s text is clearly distinguishable
from the quote itself. However, at this point, both paragraphs within the blockquote
element have the closing-quote background, so a final rule is required.
blockquote>p+p {
background: none;
}
This fairly complex rule uses both a child selector (>) and an adjacent selector (+),
and styles the paragraph that comes immediately after the paragraph that’s a child
element of the blockquote (which is the paragraph with the cite element). The
rule overrides the background value defined in step 5 for paragraphs within the
block quote). Note that this assumes the quote itself will only be a single paragraph.
If you have multi-paragraph quotes, you’ll need to apply a class to the final
paragraph and set the quote-close.gif image as a background on that, rather
than on blockquote p.

 

**Note that the advanced selector shown isn’t understood by versions of Internet
Explorer prior to 7. The best workaround for that browser is to use conditional comments
(see Chapter 9) to remove the quote graphic backgrounds.