The (x)html tag blockquote is generally used for, surprise, block-level quotes. For such a useful tag, it’s kind of plain looking, don’t you think? Why not spice it up a bit with some CSS?
This is an example blockquote, after applying some styling. Make something similar, or do your own thing.
Like my blockquote styling? I’ll show you how it’s done.
Here is a CSS rule that outputs a similar result:
blockquote {
margin:22px 40px;
padding:3px;
color:#575757;
padding: 0 50px;
background: transparent url("images/blockquote.gif") no-repeat 0 0;
}
You will need a “quote-mark” image of about 32×32 pixels for this to work correctly. To make one yourself, create a new image and type a #e5e5e9 quote-mark into it.
Of course, you may want to tweak the color values and spacing so it fits into your template correctly.
The blockquote is one of the bloggers’ most-used tags. It’s a great way to quote an excerpt from a post you’re linking to, as I do frequently.
Pingback: CSS Pullquotes | Webmaster-Source