Easy Pull Quotes
A pull quote on a web page is a section of text pulled out of web page content and presented in an attention-getting way. They're usually thought-provoking or enticing excerpts.
This article shows you an easy way to present pull quotes so they're noticed. No plug-ins are required. It's done without tables, just a bit of CSS.
If you don't know CSS, you can still implement this.
One Easy Method
The first method simply puts a style attribute into a HTML P (paragraph) tag. Here is an example:
<p style=" width: 25%; font-size: 24px; margin: 10px; float: left; border: 3px solid; padding: 20px;"> The sky was the prettiest blue you ever did see. </p> <p> I walked out the door and my eyes opened wide. The sky was the prettiest blue you ever did see. My partner came out to join me on the porch. ... </p>
The first P tag is the pull quote. It specifies the pull quote to be 25% of the width of the normal P tag, have a font size of 24 pixels, a margin around the pull quote of 10 pixels, float to the left (which causes the next paragraph to wrap around the right of the pull quote), have a 3 pixel solid border, and 20 pixels of padding between the border and the pull quote text.
When you copy this for testing, give it a few additional paragraphs above and below the pull quote for a better visual of how it presents.
Other attributes can be added to the pull quote P tag style. Some of those are presented below, in the second method. They can be copied verbatim and pasted into the P tag style.
Another Easy Method
The second method is with a class to hold the style values. Here is an example:
<html>
<head>
<style type="text/css">
.mypullquote {
width: 25%;
font-size: 24px;
font-weight: bold;
font-style: italic;
margin: 0 0 10px 20px;
background-color: yellow;
float: right;
border: 3px solid;
padding: 10px;
color: red;
text-align: right;
}
</style>
</head>
<body>
<p class="mypullquote">
The sky was the prettiest blue you ever did see.
</p>
<p>
I walked out the door and my eyes opened wide. The sky was
the prettiest blue you ever did see. My partner came out
to join me on the porch. ...
</p>
</body>
</html>
With the above method, you only need to create the style once, even if you have more than one pull quote on the page.
Notice that each margin is now specified.
Because the pull quote floats on the right, we want the right margin to be 0. (If the pull quote was floating on the left, we would want the left margin to be 0.)
The top margin, too, can be 0, so the top line of the next paragraph lines up with the top of the pull quote.
The left margin is specified as 20 pixels to give plenty of space between the pull quote and the text of the paragraph that wraps around it.
The bottom margin is specified as 10 pixels. The paragraph text that wraps around the pull quote will not wrap under the pull quote until the height of the line is below the specified margin. Thus, the real bottom margin can be more than requested.
Using Pull Quotes
Pull quotes can break up the monotony of long articles and big blocks of text.
Pull quotes attract attention.
They can be used to present succinct and useful information, illuminating your key points, for those who read by skimming, and might even pull the skimmer into the story. For this, pull quotes need to be short, readable at a glance.
Pull quotes can help present your content in such a way that makes the prospect of reading your web page an attractive idea.
Will Bontrager
