Six Ways to Style Blockquotes

Published July 15, 2008 by CSS Newbies.

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!

124 Responses

  1. Pingback: 常用设计元素的高级CSS技巧 | 夜阑小雨,飘洒在岁月的流沙。80后,爱网络,爱小说,爱研究。产品设计,编程代码,网络营销,原创文学, 系统研究。

  2. Pingback: Blockquote formatting. | zukunftsentwurf.de

  3. Pingback: 精通CSS-1: 常用设计元素的高级CSS技巧 | 站长站

  4. Pingback: Mastering CSS, Part 1: Styling Design Elements - Goodfav Howto

  5. Dan (reply)

    Is it not possible to expand the size of the blockquote? I wrote a post in which I wanted to include an application I wrote for a university but the slightly darker background cuts off before the quote is finished. The indent is correct through and through but the size bothers me. For now, I’ve chosen to upload it as a .pdf file instead but surely there’s a simple way to get around this problem?

  6. Pingback: 精通CSS-1: 常用设计元素的高级CSS技巧 | 中国私服网

  7. Pingback: Blockquote dan Pullquote - License, Crack, Patch, KeyGen, Hack

  8. Pingback: 精通 CSS 造型設計元素 | QiHi 前端技术分享

  9. Joachim Bridzinski (reply)

    Politicians are chosen to represent their constituencies on election day.
    If we consider the role of news channel and printing house,
    they are the main players who provide us deep knowledge of the happenings in country including
    the international news. The idea that there existed an all- knowing God who judged.

    Feel free to surf to my page; Joachim Bridzinski

  10. cordaid-pbf.com (reply)

    Understanding both advantages and disadvantages are important in order to choose the best internet marketing strategy.
    They only want your money and they want as much of it as
    they can possibly get. It’s probably some mix of the two, so I have to
    give him props for not going too far in either direction.

  11. klicken (reply)

    magnificent issues altogether, you simply won a brand new reader.
    What would you suggest in regards to your submit that you just made some days in the past?

    Any positive?

  12. chivaspress.com (reply)

    They are a very good way to promote business service.

    , it is best to go for affiliate marketing being an initial step into the
    world of generating impartial income from home. For more information visit: security gives you the protection from
    all kinds of worms, viruses and other problems.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>