Stylish Blockquote

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.