Tech Blog‎ > ‎

HTML - Create Nice Blockquote Style For Your Website

posted Jul 10, 2013, 1:40 PM by Victor Zakharov   [ updated Jul 10, 2013, 1:40 PM ]
Here is my pure CSS implementation of simple blockquote style, based on this article.
I will explain every line of CSS being used as CSS comments - you will need most of them.
blockquote {
  font-size0.9em/* quoted text will be slightly smaller than a paragraph */
  font-styleitalic/* quoted text will be italic, change this to suit your needs */
  margin10px 0/* 10px margin at top and bottom, to separate multiple quotes, or single quote from the rest of content */
  padding-left60px/*quotes will be indented by 60px from the left */
  positionrelative/*this is needed for absolute positioning of the quote symbol - see below */
}
 
blockquote:before { /* before each quotation, we will have a big double quote symbol */
  font-familyGeorgiaserif/* quote symbol from this font looks nice to me, use any font family you like */
  font-size80px/* we need a big quote symbol, this one looks big enough to be noticeable */
  content"\201C"/* this is a "left double quotation mark" - see below link */
  positionabsolute/* needed for proper positioning of the quote symbol */
  left15px/* adjust this to move the quote symbol horizontally */
  top-10px/* adjust this to move it vertically */
  color#7a7a7a/* quote symbol is a shade of grey color, use a different color to suit your theme */
}
 
blockquote cite {
  font-stylenormal/* parent blockquote is italic, my cite text is just using normal font style */
  displayblock/* seems like by default cite element is inline, so this is to make right text-align work */
  text-alignright/* Yeah, I want my cite to be right aligned */
}
 
blockquote cite:before { /* every cite will begin with that */
  content"\2014 \2009"/* "em dash" + "thin space",  */
}
Works in as low as IE8. IE7 is still okay, just not showing the quote symbol.

Here is some information about embedding symbols in the content property of CSS:
http://brajeshwar.github.io/entities/
(in case you decide to choose different symbols for decoration)

Sample usage:
<blockquote>Something famous
  <cite>Somebody famous</cite>
</blockquote>
For the above style I figured that a single paragraph blockquote works just fine.
For multiple paragraphs, you need to introduce P tags starting from the second paragraph, i.e. p#1 goes without any tags.
Here is what I mean:
<blockquote>paragraph1
  <p>paragraph2</p>
  <p>paragraph3</p>
  <cite>Somebody famous</cite>
</blockquote>