CSS Blockquote Styling

 

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.