About

kadyellebee.com is a site for all-things-kristine.

Credits

my life is powered by Six Apart.

« so many posts | Main | six apart logo-y goodness »

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* candle

This is very interesting, thanks for the tip. computer

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

thanks for posting that, it’s a very helpful tip.

hope you’re feeling better and enjoying your weekend.

Safari doesn’t show them. sad