Resources for Styling Blockquotes


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

SPECIFIC STYLING TUTORIALS


Swooshy Curly Quotes Without Images


Fonts.com: Pull Quotes


Sitepoint: Pull quotes that really pull!


HTML Dog: Pull Quotes


CSS Pull Quotes


Using IMG elements rather than background images in blockquote.


Rounded corners pull-quote using CSS


Better Blockquotes with CSS


Simple CSS Blockquotes and Pullquotes


Quick tip: Styling blockquotes with CSS


Playing with BLOCKQUOTE and CSS

USING JAVASCRIPT TUTORIALS


Automatic pullquotes with JavaScript and CSS


Better Pull Quotes: Don’t Repeat Markup


Easy jQuery Pull Quotes


Automatic Pull-quotes with Behavior and CSS

BLOGGING SPECIFIC TUTORIALS


Snazzy Pullquotes for Your Blog


Making a WordPress Pull Quote


WordPress Plugin: JavaScript Pull-Quotes


WordPress Plugin: Fancy Pull-quotes (v0.85)

SIDENOTES / FOOTNOTES


Footnotes with CSS and Javascript - the final word

del.icio.us:Resources for Styling Blockquotes digg:Resources for Styling Blockquotes spurl:Resources for Styling Blockquotes wists:Resources for Styling Blockquotes simpy:Resources for Styling Blockquotes newsvine:Resources for Styling Blockquotes blinklist:Resources for Styling Blockquotes furl:Resources for Styling Blockquotes reddit:Resources for Styling Blockquotes fark:Resources for Styling Blockquotes blogmarks:Resources for Styling Blockquotes Y!:Resources for Styling Blockquotes smarking:Resources for Styling Blockquotes magnolia:Resources for Styling Blockquotes segnalo:Resources for Styling Blockquotes gifttagging:Resources for Styling Blockquotes

6 Responses »

  1. [...] Resources for Styling Blockquotes [...]

  2. [...] http://tutorialblog.org/resources-for-styling-blockquotes/ [...]

  3. Mozna zastosowac inaczej “blockquote”. Sposobem moze byc java ale w uzasadnionej strukturze

  4. Great roundup! Another CSS-based option would be CSSnewbie’s Six Ways to Style Blockquotes.

  5. great, thanks

  6. [...] Resources for Styling Blockquotes: Inspiration zum Thema Zitatblöcke [...]

Ad-Links

Translate