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-right: 0px;
margin-top: 0px;
margin-left: 20px;
margin-bottom: 10px;
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 the margin is now specified four times, one for
each side.
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. (Note
that with IE5 for Mac, a top margin of 0 causes the pull
quote to line up with the bottom of the preceding
paragraph, not the top of the next paragraph.)
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.
Question:
Did you find this article interesting and understandable? How can it be improved?
Your response is anonymous.
When done typing, click anywhere outside the box. [more info]
Will Bontrager
©2004 Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
