CSS: styling blockquote

Block-level quotations in HTML are marked up by the blockquote element. Technically speaking, the semantics of this elements says that a block-level quotation should be used for long quotations, whereas an inline-level quotation (namely the q element) should be used for short quotations (e.g. sentences). Block-level quotations are all rendered in browsers with some default styles. Generally, for this kind of elements are used margins:

blockquote {
 margin: 1em 0 1em 2.5em;
}

To create the default text indentation of a block-level quote, browsers use its left margin (of course this is the default for a writing system that uses a direction moving from left to right). This can be easily adjusted with CSS:

blockquote {
 margin: 1em 0;
}

Sometimes, and especially on blogs, we'd like to have some prettier styles associated with these elements. For example, we might want to have a background image on the left side showing a pair of quotes, and the rest of the contents with a different set of styles. This is easy with CSS:

blockquote {
 width: 30em;
 font: 1.6em Georgia, serif;
 line-height: 1.4;
 padding: 0 0 0 85px;
 background: url(css-blockquote/quote-left.png) no-repeat 0 0;
 color: #444;
}

blockquote p {
 margin-top: 0;
 padding: 1em;
 background: #eee;
 border-top: 1em solid #666;
 border-radius: 6px 6px 0 0;
}

The background image is 80 x 80 pixels in size, so we've set a left padding accordingly. Bear in mind, however, that the image will be fully shown as long as there is a certain amount of content inside our quote. Again, if your quotation is short, use the q element instead. You can see the demo below.

Demo

Live demo

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

Leave a Reply

Note: Only a member of this blog may post a comment.