1. HTML source code
Start with a blockquote and some text.
| <blockquote>Hello, I am a double quote...</blockquote> |
2. Specify blockquote
Specify blockquote element as follow:
|
blockquote { font: 1.2em/1.6em Georgia, "Times New Roman", Times, serif; width: 400px; background: url(images/close-quote.gif) no-repeat right bottom; padding-left: 18px; text-indent: -18px; } |
The CSS code above will display the close-quote.gif graphic background at bottom right corner. The padding-left and text-indent will create a hanging indent of -18px. It will look like this:
3. First letter of blockquote
Now add 18px left padding to the first-letter of blockquote. This will make the text align together. Then display the open-quote.gif at top left corner. Note I made the first letter in different font styles just to look nice.
|
blockquote:first-letter { background: url(images/open-quote.gif) no-repeat left top; padding-left: 18px; font: italic 1.4em Georgia, "Times New Roman", Times, serif; } |
More HTML and CSS: 
