Monthly Archives: April 2008

Pullquotes are used in most magazines, and many websites have adopted the use of them. They are named thus because they are short excerpts pulled from the article, and highlighted to draw your attention. This technique it great for long, wordy articles, since you can break-up the flow of the text a little, and highlight a noteworthy part of the text.

They are named thus because they are short excerpts pulled from the article, and highlighted to draw your attention.

Pullquotes on websites are generally blockquotes with a specific class assigned. Some CSS magic is applied to the class, and you have your pullquotes set-up.

I don’t use pullquotes too often, but I have classes defined nevertheless. (See my example pullquote above? It will look like a plain, unstyled blockquote if you’re reading this in an RSS reader. Visit the permalink page for the full effect.)

Here is my CSS:

.rpullquote, .lpullquote {
padding: 5px;
width: 202px;
margin-top: 8px;
margin-bottom: 8px;
border-top-width: 2px;
border-bottom-width: 2px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #990100;
border-bottom-color: #990100;
font-size: 15px;
text-align: center;
line-height: 1.1em;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
font-weight: normal;
background-image:none;
}

.rpullquote {
float: right;
margin-left: 10px;
}

.lpullquote {
float: left;
margin-right: 10px;
}

As you can see, the first rule controls the visual aspect of the pullquotes, and the following two are used to float the pullquotes to either the left or the right. Feel free to tweak the styles to fit your stylesheet better.

Now, whenever you want to create a pullquote, just follow these steps:

1. Copy the text you want to quote.
2. Paste it into a new blockquote tag.
3. Add class="rpullquote" or class="lpullquote" (right and left, respectfully) to the tag.