The blockquote XHTML tag is a fairly useful (if somewhat underused) element. Semantically speaking, a blockquote should be used any time you’re quoting a longer piece of text from another source – another speaker, another website, whatever. It’s a way of setting the text apart, and showing that it came from some other source. Stylistically, you could accomplish all this with a special class on your paragraph tags… but that wouldn’t be as semantically useful, now, would it?
Blockquotes do have some styling by default. Most browsers will indent the text in a blockquote tag, which helps the user recognize that the text is different somehow. But who’s to say that we need to stop there? Here are six different ways you could style your blockquotes using CSS.
Color and Borders
Applying a color change to the text and adding a border (along with some additional margins and padding) can really make the blockquote stand out, yet is subtle enough to retain a hint of sophistication.
blockquote {
margin: 1em 3em;
color: #999;
border-left: 2px solid #999;
padding-left: 1em; }Background Colors
If you’d like something a little more obvious than just a text color change, you might considering altering your background color instead. This causes the blockquote to “pop,” making it immediately more noticeable. When applying background colors, be sure to account for any tags inside that might alter your margins (such as paragraph tags).
blockquote {
margin: 1em 3em;
padding: .5em;
background-color: #f6ebc1; }
blockquote p {
margin: 0; }Background Colors and Borders
Of course, we’re not just limited to either-or, here. A background color in addition to a border in a complementary color is a nice effect, particularly on sites that are a little bit more “glossy.”
blockquote {
margin: 1em 3em;
padding: .5em 1em;
border-left: 5px solid #fce27c;
background-color: #f6ebc1; }
blockquote p {
margin: 0; }Background Images
We’re also not just limited to colors! Many websites make use of background images in their blockquotes to help distinguish them from the surrounding text. The background image might appear below the text, or perhaps off to the side (like we’ve done here) by way of a wider left padding.
blockquote {
margin: 1em 20px;
padding-left: 50px;
background: transparent url(quote.gif) no-repeat; }Drop-Caps and Styled Lines
Borrowing from my Book-Style Chapter Introductions article, we can also distinguish our blockquotes by using drop-caps, stylized text, or (in this example’s case) both at the same time. Here, we’re making use of the first-letter and first-line pseudo-classes, so browser support may not be 100% in older browsers.
blockquote {
margin: 1em 2em;
border-left: 1px dashed #999;
padding-left: 1em; }
blockquote p:first-letter {
float: left;
margin: .2em .3em .1em 0;
font-family: "Monotype Corsiva", "Apple Chancery", fantasy;
font-size: 220%;
font-weight: bold; }
blockquote p:first-line {
font-variant: small-caps; }Text and Color
Or, if you’d rather go the subtle-but-effective route, you might consider altering the color of the text in the blockquote, as well as the font style or variant. Also in this example, I’m making use of the :before and :after pseudo-classes to insert content into my document – namely, the quotation marks at the beginning and end of the text. Of course, :before and :after aren’t supported by all browsers, so… caveat emptor, and all that.
blockquote {
color: #66a;
font-weight: bold;
font-style: italic;
margin: 1em 3em; }
blockquote p:before {
content: '"'; }
blockquote p:after {
content: '"'; }You can see all of these examples live here. And if you’ve seen any other great examples of well-styled blockquotes in the wild (or just have a wild idea yourself), I’d love to hear about them: leave me a comment!
On July 15, 2008
10:48PM
Justin said:
When you’re done styling, there’s also fun to be had with JavaScript. The blockquote element has a rarely-used cite attribute, and it’s supposed to contain the URL from which the quote was obtained (if applicable). Unfortunately browsers don’t really do anything with it. But JavaScript can see it, so you can have it automatically put a link in for you:
http://heliologue.com/2007/09/18/using-jquery-to-extract-blockquote-metadata/
On July 16, 2008
9:16AM
Rob said:
Great link, Justin. In fact, I’m planning an article for the relative-near future (probably early August) that makes use of JQuery, the cite attribute, and blockquotes, but in a different way. But that article’s idea is pretty kick-butt too. :)
On July 19, 2008
12:47PM
Knowtebook.com said:
http://www.Knowtebook.com says thank you for these blockquote examples and will link to you in 2 days.
On July 24, 2008
12:36PM
Geoserv said:
STUMBLED!
Great post, will need to try a couple of these out.
On September 03, 2008
6:25AM
Christian Watson said:
Nice article. I created a collection of pullquote styles a while back on my own site which you may find useful.
On December 10, 2008
9:32AM
bbrian017 said:
Nice collection I think this can come in handy!
On January 28, 2009
1:26PM
Borellus said:
Nice one, very usefull informatoin.
On February 16, 2009
1:27AM
Jill Fisher said:
great ways to use blockquotes I forgot about them!
On February 25, 2009
3:52PM
Simon said:
Thanks!
On March 25, 2009
9:26AM
joe said:
Thanks!
On April 18, 2009
11:52PM
Brad Czerniak said:
There is a 7th way that you may want to play with.
blockquote{border-left:10px solid #ccc;background:#eee;margin:.612em;padding:.612em;}
blockquote:before{content:open-quote;font-size:4em;color:#ccc;vertical-align:-.4em;margin:0 .2em 0 0;line-height:.1em} /* Insert curly */
It works just like #5 and looks like #4, uses no images, and progressively-enhances responsibly — browsers that don’t recognize the :before pseudo-element will display the blockquote just fine, and those that do add the big curly quote. It will require tweaking to your typographic baseline, though.
On April 23, 2009
3:38PM
LeeJH said:
BLOCKQUOTE is *not* an ‘XHTML tag’ – it’s valid in regular HTML, and was valid way back in HTML 2.0! http://www.rfc-editor.org/rfc/rfc1866.txt
On May 02, 2009
10:40AM
Claudya said:
Nice blockquotes styles! I´m wrinting about how to use them at blogger. Ty for these nice exemples.
On May 04, 2009
2:01PM
gadarf said:
Very nice.
On August 04, 2009
12:19PM
Bradford Sherrill said:
Great samples
On August 31, 2009
4:14PM
Jared said:
Great post! Bookmarked.
On November 13, 2009
11:43AM
James said:
Awesome blockquote styles Rob and thank you for providing this to us
On December 15, 2009
5:47PM
Keith Davis said:
Hi Rob
Just what I needed.
I’ve just set up a wordpress site and activated a theme.
My theme has a little styling to the blockquote but it doesn’t look great.
Thanks for some good ideas and the CSS to make it work.
On February 08, 2010
8:09PM
jdsans said:
Nice collection