Pull Quotes
A technique traditional to print is the pull quote, a snippet of the content that stands out from its surroundings to grab a reader's attention as they scan pages.
HTML Dog, The Book 
HTML Dog is hosted by Titan Internet
Step 1: The HTML
For the pull quote basics, we can start with some HTML like the following:
<p>If ever there was ...[Big load of text]... humble pea is it.</p>
<p>Mother Nature has never created ...[Big load of text]... something so flawless.</p>
<blockquote class="pquote">
<p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
</blockquote>
<p>The green seed ...[Big load of text]... favorite for good reason.</p>
<!-- ...and so on... -->
The pull quote obviously being a quote makes the blockquote element the perfect choice.
Step 2: Floating The Quote
Now we want to take this blockquote element, pull it out of the flow and style it to stand out from the rest of the content:
body {
font: 80%/1.5 arial, helvetica, sans-serif;
}
.pquote {
float: left;
width: 8em;
background: #ddf;
font-weight: bold;
padding: 1em;
margin: 0 0.5em 0.5em 0;
}
Step 3: Adding Decoration
This is very simple CSS to give you an idea of how pull quotes can be easily achieved, but the sky is the limit - with a little more fiddling, something much more interesting can be achieved:
body {
font: 80%/1.5 arial, helvetica, sans-serif;
}
.pquote {
float: right;
width: 8em;
background: url(images/openquote.gif) top left no-repeat;
color: #030;
font-size: 2em;
line-height: 0.9;
font-style: italic;
padding: 0.5em;
margin: 0;
}
.quote p:first-letter {
font-size: 1.5em;
font-weight: bold;
}
A slightly more complex method would be to add more parts to the pull quote, such as a photograph or credit by using a bit more HTML:
<p>If ever there was ...[Big load of text]... humble pea is it.</p>
<p>Mother Nature has never created ...[Big load of text]... something so flawless.</p>
<div class="quotebox">
<blockquote>
<p>"It is my educated opinion that this is complete and utter tosh."</p>
</blockquote>
<p class="by">Patrick Griffiths</p>
</div>
<p>The green seed ...[Big load of text]... favorite for good reason.</p>
<!-- etc. -->
Slightly different CSS, essentially following the same principles as the first two examples can look like this:
body {
font: 80%/1.5 arial, helvetica, sans-serif;
}
.quotebox {
float: left;
width: 200px;
background: #900 url(images/ptg1.jpg) top no-repeat;
color: #fc0;
font-size: 0.9em;
line-height: 1.2;
padding-top: 71px;
border: 2px solid #600;
margin: 0 1em 1em 0;
}
.quotebox p {
margin: 0;
}
.quotebox blockquote {
line-height: 1.3;
font-weight: bold;
padding: 0.5em;
border-top: 2px solid #600;
margin: 0;
}
.quotebox .by {
padding: 0.5em;
}
The Problems with Pull Quotes
As pretty as they may be, pull quotes have inherent problems in the way they are placed in the middle of HTML content. To a visual, CSS enabled browser all might seem hunky-dory, but to those browsers that are not CSS-abled and fall back on the plain HTML or to screen readers for visually impaired users, the pull quotes will appear slap bang in the middle of the main content. A quote suddenly appearing between two paragraphs is clearly out of place and will confusingly break the flow.
If you are using pull-quotes, it is wise to provide a little extra information for users who would stumble on this problem. In the XHTML you can provide a message, hidden from view with CSS that reads something like "Start of pull-quote" before the quote and then "end quote" after it. You could even have a link similar to the "skip navigation" link (see Chapter 3), which would offer the user the ability to skip the pull-quote and continue to the main content.