Overview

Blockquotes can be an effective way to communicate content to your users. When styled well, they can be an attractive addition to your website. The best part about blockquotes is that most people actually read them.

This doesn’t mean that you should turn every piece of content you want your users to read into a blockquote. Good designers only use tags where they are appropriate. Blockquotes are made to, well, quote things.

An attractive way to style blockquotes is achieved by putting graphical quotation marks in the upper-left and bottom-right hand corners of the quotation and indenting the text. Some designers opt to put just the opening quotation mark, which is fine. This example will use both and, as you’ll see, styling two quotation marks is a bit trickier than styling just one.

Creating the markup

The concept is simple. We’re using two images, one for each quotation mark. Due to current CSS limitations, that means we’re going to need two block-level elements. I find it easiest to wrap the blockquote around a div, like this:

<blockquote>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing
        elit, sed do eiusmod tempor incididunt ut labore et
        dolore magna aliqua. Ut enim ad minim veniam, quis
        nostrud exercitation ullamco laboris nisi ut aliquip
        ex ea commodo consequat.
    </div>
</blockquote>

By using two block-level elements, we can take advantage of two background-image properties instead of just one, which is all CSS currently allows.

Applying the style

Now that we have the markup written, let’s take a look at the CSS. Remember, since we have a beginning and an ending quotation mark we need two separate images:

And some simple CSS:

BLOCKQUOTE {
	background: url(start_quote.png) top left no-repeat;
}

DIV {
	background: url(end_quote.png) bottom right no-repeat;
	padding-left: 30px;
	padding-right: 30px;
}

The left and right padding prevents the text from covering up the quotation marks. You may wish to add additional padding or margins to the blockquote element, depending on how you want it to look.

The result

The styled markup will look like this in a web browser: