Resources for Styling Blockquotes

August 5, 2008 by chriscoyier · 2 Comments

Most websites, especially if they are blogs, will come across the need for a block quote at one time or another. That’s just the inter-linking good spirit of the web! Block quotes are a way to include text on a page that is directly taken from another website (or other source). HTML provides us with the perfect element for such a task, the <blockquote>

Without any CSS applied to a page at all, most browsers have default styling applied to this element, to help set it apart from other blocks of text. Firefox uses the following styling by default:


blockquote {
  display: block;
  margin: 1em 40px;
}

This is not consistent between browsers however, so most “CSS Resets” include reset styling to remove all of this. You should definitely consider adding some styling back in though, for your blockquotes. I like simple design, so let me share with you one of my favorite stylings for blockquotes:


blockquote	 {
  border-left: 30px solid #d9d9d9;
  padding-left: 10px;
  font-family: georgia, serif;
  font-style: italic;
}

This style just makes a healthy indent with a light gray block to the left. Simple and elegant:

There are, of course, many many ways to style blockquotes. From simple to elaborate, from big to small, from intense to subdued. Lots of things to consider. “Pull quotes” are blockquotes brethren. There is no special HTML element for pull quotes, but they are used in much the same manner, to set apart a block of text. The difference is that the pull quote is text taken from the very article being presented. This brings about different challenges.

Here is a list of resources out there for styling, handling, and otherwise dealing with blockquotes and pull quotes.

THE BASICS & SPECIFICATIONS

HTML Dog: Blockquote
W3C: Blockquote specs(along with the “q” element, blockquotes inline little brother)
Wikipedia: Blockquote
W3 Schools: Blockquote

Not much to know about the blockquote element, other than the optional attribute “cite”, which is the URI that that the quote came from. The cite attribute has no affect on the style or functionality of the blockquote.

ROUNDUPS

Block Quotes and Pull Quotes: Examples and Good Practices

Pull Quotes (23 examples)

Pattern Tap: Pull Quotes (There isn’t hardly anything in here yet, but Pattern Tap is the perfect place to start a collection for this kind of thing.)

Comments

2 Responses to “Resources for Styling Blockquotes”

Rob - http://www.cssnewbie.com/ says:

August 15, 2008 at 2:55 am

Great roundup! Another CSS-based option would be CSSnewbie’s Six Ways to Style Blockquotes [http://www.cssnewbie.com/six-ways-style-blockquotes/].
Msn AvatarlarÄ± - http://www.msnpaketi.com says:

August 16, 2008 at 8:36 pm

great, thanks