This CSS tutorial will show you how to display two double-quote images using one blockquote tag. The trick here is apply one background image to blockquote, and then apply another background to the first-letter (pseudo-element) of blockquote.
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;
}
Pullquote style
If you want to make a pullquote, simply specify the blockquote float left or right. View my pullquote sample.
hi WDW i’m newbie at css and i used read from w3 dot org trying to learn fine but this is before i read your tutorials people you are very professional and you gave it very easy and clear thank you i become one of your biggest fan
U saved my day :) gud job
Don’t know if anybody else told you that already but according to the specs a blockquote element HAS to contain a block level element, it can’t just contain plain text or inline elements as direct children. And this kinda complicates the quote thing because they would be displayed on their own line then.
thanks thats great website
I think a padding-right will be good.
Want to buy the hottest white iphone 4 conversion kit? Highest quality white iphone 4 conversion kit is waiting for your choice! Come and take it home!
White iphone 4 avaiable! It’s a great news to tell you the latest white iphone 4 Conversion Kit is on sale. Get the chance to make your iphone more charming!
Your blog has provided a great tutorial for learning web designing. It is nice to help others and you did a great job that you have started such a nice blog.
Los Angeles Web Design
denedim çalışıyor
Thanks for sharring importent information in this blog.It was very nice.
Don’t know if anybody else told you that already but according to the specs a blockquote element HAS to contain a block level element, it can’t just contain plain text or inline elements as direct children. And this kinda complicates the quote thing because they would be displayed on their own line then.
thanks thats great website
thnks
goooooooooooooood
min:(
:)
hooob
Thanks, i searched everywhere for this double quotes trick.
ignore weight
Why do you add the “text-indent:-18px;” at first? At the 3rd step, you add a “padding-left:18px;” for the first-letter.
thnks
gooooooooooooooood
min:)
Another questionnaire, the participants’ problem identification and structuring, idea generation, problem elaboration and clarification, such as creativity, problem solving insertion sezkin idea which one’s preferred styles are evaluated. While participants preferred the style of non-disclosure and intellectual development of ADHD, with ADHD, participants chose to produce ideas.
The last example adds demonstrates a couple more features that make
This doesn’t work in IE8. When you add the background to the first-letter, it “overwrites” the background to the entire blockquote, so you only get the opening quote image showing.