Six Ways to Style Blockquotes

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!

19 Comments

  1. 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/

  2. 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. :)

  3. 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.

  4. On July 24, 2008
    12:36PM

    Geoserv said:

    STUMBLED!

    Great post, will need to try a couple of these out.

  5. Christian Watson said:

    Nice article. I created a collection of pullquote styles a while back on my own site which you may find useful.

  6. bbrian017 said:

    Nice collection I think this can come in handy!

  7. Borellus said:

    Nice one, very usefull informatoin.

  8. Jill Fisher said:

    great ways to use blockquotes I forgot about them!

  9. Simon said:

    Thanks!

  10. On March 25, 2009
    9:26AM

    joe said:

    Thanks!

  11. 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.

  12. 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

  13. 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.

  14. On May 04, 2009
    2:01PM

    gadarf said:

    Very nice.

  15. On August 04, 2009
    12:19PM

    Bradford Sherrill said:

    Great samples

  16. Jared said:

    Great post! Bookmarked.

  17. James said:

    Awesome blockquote styles Rob and thank you for providing this to us

  18. 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.

  19. jdsans said:

    Nice collection

40 Responses Elsewhere

  1. Link Drop: Great Stuff Elsewhere | Niki's DesignO'Blog said:

    [...] Six Ways to Style Blockquotes (CSS Newbie) [...]

  2. Great walkthrough of blockqoutes CSS - It'sWebDev! said:

    [...] ideas for blockquote designs, great inspiration. Go check it out – Blockquotes css SHARETHIS.addEntry({ title: “Great walkthrough of blockqoutes CSS”, url: [...]

  3. CSS Brigit |Estilos para un Blockquote said:

    Estilos para un Blockquote…

    6 tipos de estilo diferentes para un blockquote en CSS Newbie. Puedes ver los 6 ejemplos en este enlace….

  4. On July 23, 2008
    11:02AM

    Six méthodes pour styliser vos citations | Le blog de David Loureiro said:

    [...] votre visite!Pour ceux qui veulent avec des citations sympas, voici un article intéressant : Six Ways to Style Blockquotes écrit par Rob Glazebrook sur le site [...]

  5. Four New Blockquotes And How You Can Make Them said:

    [...] Block Quotes And Pull Quotes – Examples & Good Practices Simple CSS Blockquotes and Pullquotes Six Ways To Style Blockquotes [...]

  6. On July 24, 2008
    12:36PM

    Vote for this article at blogengage.com said:

    Six Ways to Style Blockquotes…

    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…

  7. Best of July 2008 | Life as a Web Designer said:

    [...] Six Ways to Style Blockquotes [...]

  8. 16+ Tutoriels et Astuces pour vos créations web [Summer Links] said:

    [...] Six Ways to Style Blockquotes 6 façons de personnaliser vos blocs de citations [...]

  9.   Weekly links roundup by Communications from DMN said:

    [...] Use a lot of HTML — either in documentation, Web content, or blogs? Then you might want to check out these six ways to style blockquotes. [...]

  10. How To Dress Up Your Blog Posts | Moms Business Coach said:

    [...] CSS For Newbies CSS Tricks BloggerBuster Show Some Bookmarking Love [...]

  11. 12 Creative and Cool Uses for the CSS Border Property said:

    [...] are often useful, seldom used. But if you have a website that often refers to the words of others, a well-styled blockquote will go a long way towards impressing your readers with your borrowed [...]

  12. Herramientas y recursos para hacer el diseño y desarrollo web más fácil | Clearfix said:

    [...] puedes ver Six Ways to Style Blockquotes para encontrar varios códigos para estilizar las frases en tu sitio [...]

  13. Get More Conversions with Good Looking Pages | Internet Real Estate Success said:

    [...] you can use them throughout your site.  If you want some creative and easy examples, check out CSS Newbie’s post on 6 Ways to Style Blockquotes for [...]

  14. On May 06, 2009
    2:01PM

    Zitate mit CSS gestalten - Styling Blockquotes | Sura 1.at said:

    [...] Meine Beispiele sind eine Bearbeitung eines Artikel von: http://www.cssnewbie.com [...]

  15. Blockquote dan Pullquote | Informasi123.co.cc said:

    [...] six-ways-style-blockquotes, [...]

  16. tamiflu online said:

    tamiflu vaccines and antiviral drugs…

    veterinary tamiflu. achat tamiflu pharmacie. tamiflu cystic fibrosis. tamiflu purchase avian bird flu. buy tamiflu. cost of tamiflu. counterfeit tamiflu. tamiflu side effects. …

  17. Mastering CSS, Part 1: Styling Design Elements | CSS | Smashing Magazine said:

    [...] Six Ways to Style BlockquotesA tutorial of different methods for styling the blockquote XHTML tag with CSS. [...]

  18. Mastering CSS, Part 1: Styling Design Elements « Tech7.Net said:

    [...] Six Ways to Style BlockquotesA tutorial of different methods for styling the blockquote XHTML tag with CSS. [...]

  19. Mastering CSS, Part 1: Styling Design Elements - Programming Blog said:

    [...] Six Ways to Style BlockquotesA tutorial of different methods for styling the blockquote XHTML tag with CSS. [...]

  20. AMB Album » Mastering CSS, Part 1: Styling Design Elements said:

    [...] Six Ways to Style BlockquotesA tutorial of different methods for styling the blockquote XHTML tag with CSS. [...]

  21. Shopping Mall » Mastering CSS, Part 1: Styling Design Elements said:

    [...] Six Ways to Style BlockquotesA tutorial of different methods for styling the blockquote XHTML tag with CSS. [...]

  22. Myfreepedia.com » Blog Archive » Mastering CSS, Part 1: Styling Design Elements said:

    [...] Six Ways to Style BlockquotesA tutorial of different methods for styling the blockquote XHTML tag with CSS. [...]

  23. Advertisers Blog » Mastering CSS, Part 1: Styling Design Elements said:

    [...] Six Ways to Style BlockquotesA tutorial of different methods for styling the blockquote XHTML tag with CSS. [...]

  24. Mastering CSS, Part 1: Styling Design Elements | YABIBO.COM - YOUR WEB WORLD said:

    [...] Six Ways to Style Blockquotes A tutorial of different methods for styling the blockquote XHTML tag with CSS. [...]

  25. 精通 CSS 造型设计元素 said:

    [...] Six Ways to Style Blockquotes 使用 CSS 为 XHTML 中的 blockquote 标记定义样式的多种方法。 [...]

  26. Tudo sobre wordpress said:

    [...] Six Ways To Style Blockquotes [...]

  27. Blockquote Style pada Wordpress | Van'S Zone said:

    [...] CSSnewbie Posted in: Blog ADD [...]

  28. 精通CSS造型设计元素 said:

    [...] Six Ways to Style Blockquotes 使用 CSS 为 XHTML 中的 blockquote 标记定义样式的多种方法。 [...]

  29. 9 cosas que no debemos olvidar cuando diseñamos un blog! | metrapach's blog! said:

    [...] Six Ways To Style Blockquotes Six different ways to style blockquotes including how-tos for each. [...]

  30. 精通 CSS 样式设计元素 - 菠菜博 said:

    [...] Six Ways to Style Blockquotes 使用 CSS 为 XHTML 中的 blockquote 标记定义样式的多种方法。 [...]

  31. 精通 CSS 造型设计元素 Mastering CSS - E@生活在别处 said:

    [...] 中使用引号 (quotes) 标记的指南,包括如何创建适合不同语种的标准引号。 Six Ways to Style Blockquotes 使用 CSS 为 XHTML 中的 blockquote 标记定义样式的多种方法。 Make OL list start from [...]

  32. 精通 CSS 样式设计元素 - 木牛工作室 said:

    [...] Six Ways to Style Blockquotes 使用 CSS 为 XHTML 中的 blockquote 标记定义样式的多种方法。 [...]

  33. 精通 CSS 样式设计元素 « 前端设计 said:

    [...] Six Ways to Style Blockquotes 使用 CSS 为 XHTML 中的 blockquote 标记定义样式的多种方法。 [...]

  34. Dream step » Blog Archive » 精通 CSS 样式设计元素 said:

    [...] Six Ways to Style Blockquotes 使用 CSS 为 XHTML 中的 blockquote 标记定义样式的多种方法。 [...]

Leave a Comment