A pull quote is a sentence or two extracted from an article and placed in quotes. The extracted text is used as a "teaser" to entice the reader to continue reading. By using 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.
Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

How to Use a Pull Quote

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 (&ldquo;) and a right double quotation mark character entity (&rdquo;). 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.



RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268