Pull Quotes How-To

A pull quote is a bit of text set into the regular text along the right or left margin. The pull quote is a quote pulled from the article.

Generally, a pull quote's text is formatted a bit different. There may be a border or sufficient white space to set it off from the rest of the text.

To make pull quotes, start with CSS definitions for pull quotes on the right and left sides of the article. Then, use the appropriate class name in any HTML block tag to publish the pull quote.

That may be enough to give you the idea of how it is done.

That may be enough to give you the idea of how it is done. If not, read on.

As an example, let's name one of the CSS definitions pullquoteright. It has a float:right property. Let's name the other pullquoteleft, with a float:left property. Both definitions have margin, border, font and other properties needed for designing the pull quote.

To make a pull quote, then, this source code can be used:

<p class="pullquoteright">
That may be enough to give you 
the idea of how it is done.
</p>

Any HTML block tag can be used.

P is an HTML block tag. As are DIV, BLOCKQUOTE, and others. Any HTML block tag can be used. Simply assign an appropriate class name to make a pull quote.

Here are example pullquoteright and pullquoteleft definitions you may use to get started with.

.pullquoteright {
   width:150px;
   margin:0 0 3px 15px;
   padding:5px 0 5px 0;
   border-top:3px double #999;
   border-bottom:3px double #999;
   font-size:14px;
   line-height:17px;
   font-family:verdana,sans-serif;
   text-align:center;
   float:right;
   } 
.pullquoteleft {
   width:150px;
   margin:0 15px 3px 0;
   padding:5px 0 5px 0;
   border-top:3px double #999;
   border-bottom:3px double #999;
   font-size:14px;
   line-height:17px;
   font-family:verdana,sans-serif;
   text-align:center;
   float:left;
   }

Change the CSS properties to suit you needs.

Will Bontrager