Quotations in CSS

Here's a short tutorial on how to style quotes with CSS whilst making sure you use the right XHTML tools for the job.

Quotes on websites

Following a comment from Andrew at Rickmann Designs this post has been updated to remove the non-semantic div. Hurray!

Particularly for a service-based businesses quotes are a great way of showing that you are a trusted and well regarded business. XHTML allows you to mark up a quotes with two tags - the blockquote or quote. But the default styling for these elements is not very inspiring. Thankfully with CSS you can do pretty much anything you want with quotes. This article will explain how to get to the following:

Using the right semantics

XHTML offers two elements for quotes in the blockquote and quote. Quote is used for inline quotes:

"I like beer" said George.

Blockquote is used for larger quotes:

"Most modern calendars mar the sweet simplicity of our lives by reminding us that each day that passes is the anniversary of some perfectly uninteresting event."

There is also the cite element which allows us to assign a citation to the quote.

Markup the example

Let's start with some solid markup. Then if we change our mind we can change the styling.

<blockquote>
     <p>That was one of the best Pizzas I have ever eaten in my life. The cheese was so good it made me faint. </p>
</blockquote>
<cite>Elvis A. Presley</cite> 

~~In order to get the up and down quotation we need to add in an additional div. It is not a perfect solution as semantically it means nothing but we need to use it.~~

Sprinkle in some CSS

Then we add the some CSS:

blockquote p
    {
    padding: 0px 15px 0px 0px;
    font-size: 1.2em;    
    float: left;
    background: url(../images/quote_down.png) bottom right no-repeat;
}

blockquote
    {
    padding: 20px;
    font-size: 1.8em;    
    background: url(../images/quote_up.png) top left no-repeat;
}

cite
    {
    font-size: 1.2em;
    float: right;    
} 

This applies the quotation marks to the top left and bottom right of the quote. The citation is floated right. And that's it! I combine this with a PHP script that produces random quotes.

View the example and download the source code here.

This code has been tested and works in the following browsers

Win IE5-7
Win Firefox 1.0-2
Win Opera 7-9
Win Netscape 6-8
Mac Safari 2
Mac Firefox 1.0-2
Mac Camino 1
Mac Opera 9

Comments

Andrew Mar 9 2007

I am curious as to why you have included a div around the blockquote rather than styling the paragraph within it.

George Ornbo Mar 9 2007

@Andrew - Thanks for pointing that out. Sometimes you can’t see beyond the end of your nose. I’ve updated the post and put a credit in the source. Lovely semantic goodness.

Andrew Mar 9 2007

Glad I could be of help.

bart Mar 12 2007

What happens when you want to use more than one p in your blockquote?

George Ornbo Mar 12 2007

@bart - You could create a class in your CSS to show the borttom quotation mark and apply it to the last paragraph tag in your markup. Alternatively you could wrap the whole thing in a div and apply the background image to that. Not quite semantically pure but it will work.

bart Mar 13 2007

I think I’ve seen another solution on Sitepoint… Their fix involves placing the background image in all p elements inside of bottom padding area. Each p element would then have a negative margin-top equal to the size of the bottom padding of the previous p element, essentially pulling up the p below the current p. You also need a background color on the p elements so that the quote background image of the previous element doesn’t show underneath the current (“pulled over”) element.

Sometimes, I think it’s visually more pleasing to simply use the opening quote and forget about the closing one. Depending on where your text ends, the right quote may look out of place.

Adam Mar 16 2007

Would it be possible to swap the mark-up around and add a class to the first paragraph?

Like so

The blockquote positions the image bottom right, rather than top left.

The first (or only) blockquote p gets a class of .quotestart then positions the image top left.

It adds one class to the whole thing, but ensures you never get more than you need.

I think.

Thanks for the tip man!!!

prisca Jun 27 2008

George :-)

thanks for this - just sitting in my webclass talking quotes and styling. Love your approach :)

Thanks :-)

gel Jul 7 2008

super cute!
love it

Craig Snedeker Sep 26 2008

That quote IS AWESOME! I’ve had that kind of pizza before also…

Comments on this post are now closed.

Shape Shed