Updated! New style added. Blockquotes are rather boring unless you jazz them up a bit with some quotes and styling. Otherwise, why have them? Right?
Normally what you want is just a way to have quotes to start the block and quotes to end it. Here’s some code that will provide a nice looking blockquote with a side border and opening quote. You can have several styles of blockquotes in the same web design by using the .class method. They’re great for creating visibility for key points of your blog or business site. Here’s a few examples of ways to manipulate your blockquotes.

New Style added 8-11-2011

This style uses a single quote with a shift to the left to give it some room. Clean and classy.

blockquote.singlequote {
background: url("images/pull-quote-dark.png") no-repeat scroll 0 4px transparent;
font-family: Georgia,"Times New Roman",Times,serif;
padding: 5px 10px 5px 35px;
font-size: 16px;
line-height: 24px;
font-style: italic;
}

I gave this a class name of ‘singlequote’ so it would display properly since I have several different blockquotes. If you wish to use this as your sole blockquote styling then there’s no need to assign a class to it. This will produce something like this:

Mid penatibus scelerisque lorem facilisis ridiculus, in sed! Urna tortor dictumst integer! Proin magna, nunc amet mauris porttitor? Habitasse! Purus? Rhoncus. Non porta odio porttitor magnis nisi enim purus dictumst porttitor magna.

You can download the quote image here. Right click and save as:

You may also need to add this snippet to your CSS file to satisfy some browsers that want to automatically add additional quotes to the blockquote:

blockquote {
quotes: none;
}

Style #1

blockquote {
background:#f9f9f9;
border-left:10px solid #ccc;
margin:1.5em 10px;
padding:.5em 10px;
quotes:"\201C""\201D""\2018""\2019";
width: 400px;
font: italic normal 12pt/1.2em Georgia;
color: #888;
}
blockquote:before {
color:#ccc;
content:open-quote;
font-size:4em;
line-height:.1em;
margin-right:.25em;
vertical-align:-.4em;
}
blockquote p {
display:inline;
}

That produces this look which can be inserted in your text in a float left or right position.

CSS Blockquote Style

Style #2

This blockquote style I used for some testimonials for a client site. The idea was to stack the testimonials on top of each other using some spacing and some bold quotations. It’s actually a div class that could work as a blockquote. Or, your could simply assign the class to your blockquote tag. Here’s the code:

.Testimonial {
background:#F7F7F7 url(images/testimonial_top.gif) no-repeat scroll 0 0;
border:1px solid #EBEAE9;
clear:both;
margin:0 0 15px;
padding:15px 0 0 15px;
}

And here’s what the result would be (reduced image):

Css Blockquote Style

Style #3

I used this style for a typical blockquote containing a snippet of the text from the page in order to make a visible point to the visitor regarding an aspect of their services. Here’s the code:

blockquote {
 width: 500px;
 font: italic normal 12pt/1.2em "Lucida Bright";
 padding: 10px;
 border: 1px #00CCFF solid;
 text-align: center;
}

And the simple HTML:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lectus magna, consectetur eu eleifend sit amet, condimentum ac massa. Maecenas at diam eu est scelerisque facilisis id sit amet ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

And here’s the result:

CSS Blockquote Style

You can see that your blockquotes can have background colors, background images if you wish, miscellaneous border controls, spacings, fonts, etc. just using your imagination.