Recent Posts:

Archives:

Blogroll:

Get Email Updates:
Enter your email address:

Monday, 24 January 2011

BLOCKQUOTE and CSS:

The standard format for blockquoted text is for it to be indented by 40px, which looks quite boring. But with CSS you can create blockquoted text that makes your quotes standout.


blockquote {border : 2px solid #EFEFF7; width: 400px; margin: 0 auto; padding: 10px; background-color: #EFEFF7; quotes: "\201C" "\201D";}

blockquote:before {content: open-quote; font-weight: bold; font-size:20px;}

blockquote:after {content: close-quote; font-weight: bold; font-size:20px;}

Add a border:
A simple way to improve blockquoted text is to add a border around it. For example, this CSS will put a 2 pixel wide border around all blockquotes in a page.


blockquote{border : 2px solid #EFEFF7;}

Blockquote Width:
To set the width of your blockquoted text add a width attribute.


blockquote{width: 400px;}

Align your blockquote
I prefer to allign my blockquotes to the centre of the page. To do that add a margin attribute. Margin is the space up/down/left/right around an element. Setting it to 0px auto means 0 padding on top and bottom, and auto left and right, to self-adjust. For this to work, you need to set a width or else the element will take up all the available space (as is the default behavior for block level elements).


blockquote{margin: 0 auto;}

Set the Background:
One of the easiest ways to get your quotations to stand out is to change the color of the background. I prefer a very light blue called "#EFEFF7". I like it because it doesn't compete or clash with my blue lettering or heading.


blockquote{background-color: #EFEFF7;}

Add 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 CSS it is very easy to do.


blockquote:before {content: open-quote; font-weight: bold; font-size:20px;}

blockquote:after {content: close-quote; font-weight: bold; font-size:20px;}

Finally, put it all together:
And here's what your completed style sheet looks like.

blockquote {border : 2px solid #EFEFF7; width: 400px; margin: 0 auto; padding: 10px; background-color: #EFEFF7; quotes: "\201C" "\201D";}

blockquote:before {content: open-quote; font-weight: bold; font-size:20px;}

blockquote:after {content: close-quote; font-weight: bold; font-size:20px;}

And here's the result!


0 Comments:

Post a Comment

Subscribe to Post Comments [Atom]

‹Home

Newer›  ‹Older