One of the projects I am involved with needed the blockquote element to have some more style, so I just thought i’d show you how I did it.

Bit of a basic CSS tip but none the less, some of you may not have thought of it, or knew about it.

Normally, blockquote styles are just indented at the left and right to make them stand out. With a little bit of CSS, you can add nice styles, like so:

blockquote {
background-image:url("../images/bq.gif");
background-position:top;
background-repeat:repeat-x;
padding:30px;
margin:0 30px;
border:1px solid #E4F3F9;
font-style:italic;
font-size:120%;
}

The image I am referencing is . Just a simple little gradient from light blue to white that will be shown at the top edge of the blockquote.
That’s it! You can experiment with different settings and of course make a different coloured image to suit your website colour scheme.

Related Posts

• Is the diagonal line background style old hat now?
• The diagonal stripe element in website design
• Google changes Adsense policies yet again
• Javascript - remember your quotes
• Using unobtrusive javascript to show and hide elements