The tag blockquote in html has a special beauty than any other tags by default. And when you use blockquote in your post, it gets more meaning than merely a text.

Then what will happen if you make your blockquote more stylish.

See my blockquote below:

There are 10 kinds of people in this world….Those who understand binary and those who don’t “

How i made this type of blockquote is simple. Add the following text to your style sheet.

blockquote:first-letter {
background: url(http://www.sajithmr.com/downloads/quote-left.png) no-repeat left top;
padding-left: 45px;
font: italic 1.4em Georgia, "Times New Roman", Times, serif;
}

blockquote p:first-letter {
background: url(http://www.sajithmr.com/downloads/quote-left.png) no-repeat left top;
padding-left: 45px;
font:  3.4em Georgia, "Times New Roman", Times, serif;
}

blockquote {
font:  1.3em Georgia, Times, serif;
color: #555555;
}

the second block in not necessary. Some blogs automatically add P tag after blockquote , thats why i used blockquote “p”.

Download the file http://www.sajithmr.com/downloads/quote-left.png and save locally, (if you want) and you can change the quote picture according to your blog style.

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

This entry was posted on Saturday, April 19th, 2008 at 9:14 am and is filed under php. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.