Today I’ll show you how to stylize those blockquotes that are sometimes necessary in web sites.

Using the quotes that are part of the standard fonts can be boring. The way I’ll teach you uses images of any font’s quotation marks.

I’ll be using these two quotation images:

It’s nothing really difficult, but there’s a little problem with IE if you want to do this a certain way.

Usually, when people plan on using CSS to stylize their blockquotes, they would use blockquote:before and blockquote:after to stylize what comes…well…before and after.

Problem with this is that IE doesn’t recognize these two.

The easiest solution is this:

First the HTML:

<blockquote>
    <div>
        Content goes here.
    </div>
</blockquote>

Explanation:

There’s a good reason why there’s a random div inside the blockquote. It’ll be made clear with the CSS.

The Clear CSS:

blockquote
{
    background: url(images/quoteopen.jpg) left top no-repeat;
}
blockquote div
{
    padding: 0 48px;
    background: url(images/quoteclose.jpg) right bottom no-repeat;
}

Explanation:

Since “before” and “after” don’t work for blockquotes for all browsers, we’re doing them manually basically.

According to the CSS, the <blockquote></blockquote> tags will have the opening quotation marks. The <div></div> tags will have the closing quotation marks. It’s as simple as that.

Some of you might be wondering, “Why not use <p></p> tags instead of <div></div> tags?” It’s because you might need to put in multiple <p></p> tags inside the <blockquote></blockquote> tags for formating purposes. That’s the only reason though. If you know you won’t use more than one <p></p> tag inside, then go ahead and style the <p></p> tag instead of the <div></div> tag.