Pin Me

How to Add and Style Blockquotes

written by: •edited by: Michele McDonough•updated: 5/31/2011

There is much more to blockquotes than an indentation and perhaps some italic text. You can add images to enhance the impact of such a section, and this guide to CSS and HTML blockquotes will show you how.

  • slide 1 of 4

    The Power of Blockquotes

    Beyond the usual styles and layouts for text and images in a webpage, CSS can be used enhance common elements such as blockquotes. This webpage element appears most commonly as citations or quotes from people, and are enclosed within the <blockquote></blockquote> tags.

    They might be used in such a way:

    Super weight film Director Peter Jackson was very happy to be working with Stephen Fry:

    “In addition to his writing skills, he’s a terrific actor and will create a very memorable Master for us.”

    Bring on the Hobbits!

    However, of course, the default styling of an indentation is quite dull. Lots more can be done besides this, allowing you to deliver a unique and stylish visual enhancement to your website, using just a few lines of CSS.

  • slide 2 of 4

    Styling a Blockquote with HTML

    Although much less elegant than CSS (see below) it is possible to style your blockquote using just HTML.

    A blockquote styled wholly with HTML By default, the blockquote section will appear as per the accompanying image. However with some additional HTML, you might add italic type by placing the <em> tags within the blockquote, as follows:

    <blockquote><p><em>your quoted text…</em></p></blockquote>

    This is obviously a very basic way of doing things, but if you’re only looking for a way to make the default blockquote look more interested and are reluctant to get your hands dirty with CSS at this stage, this is just one of the ways in which you might style a blockquote. You might consider switching the italic emphasis for a bolder, <strong> type.

    Another way of emphasizing the text in your blockquote is to change the font and size, which can be done as follows:

    <blockquote><p><font face="georgia" size="14px"><em> your quoted text… </em></font></p></blockquote>

    This will apply the Georgia font to your blockquote (although any text style can be used), and set the text at 14 px. You might also change the color of the blockquote using the <font color=”red”> property.

  • slide 3 of 4

    Advanced Blockquote Techniques with CSS

    Using CSS, you can create remarkable blockquotes that can be used to considerably enhance the look and feel of any quotes that you use, and draw your readers in to the article.

    One particularly stylish method is to employ a small image within the blockquote section, typically an image of quotes. In order to create the blockquote look seen on the right, begin by opening a paint application, creating a text box and typing a single set of quotes. Choose the font that you want in order to style the quotes appropriately, size them up to about 14 pt and then color them to fit the rest of your website theme. Finally, shrink the image canvas down so that it focuses on your quotes and save as a GIF.

    Next, you will need to create your CSS code for the blockquote element. As this element is strict HTML/XHTML, you only need to type the name in your CSS document, rather than prefix is with # as you might for a div.

    A stylish blockquote created with CSS and HTML The following CSS creates the blockquote seen in the accompanying image:

    blockquote {

    padding:3px;

    color:#575757;

    font-style: italic;

    padding: 0 50px;

    font-size: 1.2em;

    border: 1px solid #f0f0f1;

    background: transparent url("path/to/blockquote.gif") no-repeat 0 0;

    }

    Obviously there are many variations you can try on this, such as altering the color, the font type and perhaps removing the border. You might also add the float property in order to push the blockquote to the left or right.

    With these blockquote styling tips, you should be able to create a striking new look for your website!

  • slide 4 of 4

    References

    Author’s own experience.

    Text sample and screenshots from http://www.kasterborous.com