Playing with BLOCKQUOTE and CSS : Dressing up Your Quatations

Using the blockquote tag can result in really boring looking quotations. After all, the standard format for blockquoted text is to be indented on the right and left about 40px. That's it. But with CSS we can do better. We can create blockquoted text that pops from your Web page and makes your quotes a useful design element, and not just more indented text.

Add a Border

A simple way to improve blockquoted text is to add a border around it. This tells your readers that they are looking at something special. For example, this CSS will put a 2 pixel wide black border around all blockquotes in a document:

blockquote { border : 2px solid #000; }

And as with any CSS border, you can make it dotted or dashed, make it wide or narrow, and change the color to make it match your page.

Blockquote Widths

But don't just stop with the border, the width of a blockquote can be defined with CSS. If you don't define it, the browser will define it, and that can result in a blockquote that takes up your entire screen. It's a good idea to define the width of your quotations, and this style call will define all blockquotes as 200px wide:

blockquote { width: 200px; }

Aligning Your Blockquotes

Once you have a narrower blockquote, you'll want your other text to wrap around it and move up to it without crowding. This style sheet will define all blockquotes as 200 pixels wide, and floating on the right, so all text will flow around them to the left:

blockquote { width: 200px; float: right; }

But you'll also want to play with the margins and padding on your quotations if you're going to float them in the page so that there is not an excess of whitespace near your quotations:

blockquote { width: 200px; float: right; margin: 0px; padding: 10px; }

Blockquote Backgrounds

One of the easiest ways to get your quotations to stand out is to change the color of the background. Now, with CSS you can use an image as a background or you can simply change the color. Sometimes changing the color is all that is required to bring attention to your blockquote:

blockquote { background-color: #ccc; }

Add in Quotes to Your Blockquote

If you're using blockquote as it's supposed to be used, then you may need quotations to precede and follow the quotation. And with CSS2 you can do this (try this out in an XHTML compliant browser, like Mozilla or Firefox):

blockquote { quotes: "\201C" "\201D"; } blockquote:before { content: open-quote; font-weight: bold; } blockquote:after { content: close-quote; font-weight: bold; }

Putting it All Together

And here's what your entire completed style sheet looks like:

blockquote {
 border : 2px solid #000;
 width: 200px;
 float: right;
 margin: 0px;
 padding: 10px;
 background-color: #ccc;
 quotes: "\201C" "\201D";
 }
 blockquote:before { content: open-quote; font-weight: bold; }
 blockquote:after { content: close-quote; font-weight: bold; }