Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

How to Use a Pull Quote

By Stephen Bucaro

A pull quote is a sentence or two of text extracted from an article and placed in quotes. The extracted text is used as a "teaser" to entice the reader to continue reading. A pull quote is also used to break up the monotony of the text in a large article. Adding pull quotes to your articles can make them look more professional.

The easiest way to create a pull quote is to simply place the text within an html blockquote element. The blockquote element automatically provides the margin for the pull quote. However, pull quote text is normally in a larger font than the main text, and it may also use a different font and/or a different font color. To achieve this you can style the blockquote element as shown below.

<blockquote style="color:blue; font-family:verdana;
font-size:16px; font-style:italic;">&ldquo;
by creating or choosing your own quotation mark and
background images along with choice of fonts, font size
and color, you have infinite opportunities for creativity
in the design of pull quotes
&rdquo;</blockquote>

“ by creating or choosing your own quotation mark and background images along with choice of fonts, font size and color, you have infinite opportunities for creativity in the design of pull quotes ”

Note in the example above that within the blockquote element I included a left double quotation mark character entity (“) and a right double quotation mark character entity (”). This allows you to cut-and-paste pre-styled blockquote tags which you then paste your text into.

Note - in this article, I'm using inline style. Normally style code is placed in an external file which is linked to the webpage. If you're going to use only one instance of a pull quote on your web site, then inline style code is best. If you're going to use multiple instances of pull quotes, then an external style sheet is best.

The example below shows one method to make your pull quotes even more interesting - using images for the left and right quotation marks.

<table style="border-style:none; padding:0; margin:0;
width:450; color:blue; font-family:verdana; font-size:16px;
font-style:italic;"><tr>
<td valign="top">
<img src="leftquote.gif"></td><td>
A pull quote is a sentence or two of text extracted from
an article and used as a teaser to intice the reader to
continue reading and to break up the monotony of the text
in a large article.
</td><td valign="bottom">
<img src="rightquote.gif"></td>
</tr></table>

A pull quote is a sentence or two of text extracted from an article and used as a teaser to intice the reader to continue reading and to break up the monotony of the text in a large article.

For this example, I used an html table element rather than a blockquote element. Many Webmaster's poo-poo the use of tables, mostly when used for webpage template design. But in this case I used a table because it has the inherent ability to keep it's cells lined up horizontally. I defined a three-cell table, placing the image of a left quotation mark in the first cell, the pull quote text in the second cell, and the image of a right quotation mark in the third cell.