kadyellebee: styling quotes

In one of my del.icio.us feeds, I saw Styling Blockquotes this evening, and read it before I realized it was an old post. I went to check out the comments to see if anything else exciting came out of the post, and noticed I’d commented on it originally. LOL, how’s that for sillyness??!!

Simon’s method uses a div tag inside of a blockquote. This is an excellent way to use images for your quotations - this gives quite a bit more cross-browser option.

On my site here, I use an only css method, which means my quotes can’t be seen in browsers that don’t support the method. Mozilla-based show them, IE doesn’t, and it looks like Opera does. I don’t know about Safari. But the basic background and padding still applies in all CSS-friendly browsers. I like how this works, and I’ve had several people ask me how I do it, so I’m sharing the basic concept.

For more details, see the CSS 2.1 Quotes property and inserting Quotes with the Content property. The blooberry guide to quotes has more of the proper syntax for writing the quotes.

These values are a bit more generic than my default skin, but its mainly to give you an idea of how it can be done.

/* basic appearance is set here, including the quotation marks that you want to appear before and after the quote. I use curly quotes, but other countries use other values. */ q, blockquote { font-family: Arial, Helvetica, sans-serif; background-color:#eeeeee; color:#333333; quotes: '“' '”' "‘" "’"; }

/* because the blockquote is a block element, it can
have margin and paddings applied to it nicer than
q, which is an inline element. */
blockquote {
margin: 3px; padding: 3px;
border: solid 1px #cccccc;
}

/* So the quotation marks show up nicer, I change their
color and size to a different style. */
q:before, q:after, blockquote:before, blockquote:after {
font-size: 150%; font-weight:bold; color:#c30000;
font-family:georgia, "Times New Roman", serif;
}

/* this sets the before quote, with a padding after it. */
q:before, blockquote:before { content:open-quote; padding-right: 5px; }

/* and this sets the after quote, with a padding before it. */
q:after, blockquote:after { content: close-quote;
vertical-align: text-bottom; padding-left: 10px;}

Enjoy!

Comments

Happy birthday for tomorrow! Mine is tuesday! *Hugs*

Posted by: Annie | April 23, 2004 09:40 AM

This is very interesting, thanks for the tip.

Posted by: Wendy | April 23, 2004 04:12 PM

You always put little nifty ideas in my head and reminding me of things I’ve meant to do but forgotten. I need to beautify my blockquotes. Maybe I’ll do that before I forget this time.