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.

The (x)html tag blockquote is generally used for, surprise, block-level quotes. For such a useful tag, it’s kind of plain looking, don’t you think? Why not spice it up a bit with some CSS?

This is an example blockquote, after applying some styling. Make something similar, or do your own thing.

Like my blockquote styling? I’ll show you how it’s done.

Here is a CSS rule that outputs a similar result:

blockquote {
margin:22px 40px;
upadding:3px;
color:#575757;
padding: 0 50px;
background: transparent url("images/blockquote.gif") no-repeat 0 0;
}

You will need a “quote-mark” image of about 32×32 pixels for this to work correctly. To make one yourself, create a new image and type a #e5e5e9 quote-mark into it.

Of course, you may want to tweak the color values and spacing so it fits into your template correctly.

The blockquote is one of the bloggers’ most-used tags. It’s a great way to quote an excerpt from a post you’re linking to, as I do frequently.