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.
Start with a blockquote
and some text.
<blockquote>Hello, I am a double quote...</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:
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;
}
If you want to make a pullquote, simply specify the blockquote float left or right. View my pullquote sample.
ludwik
btw. it’s not necessarily but you should use block elements inside your blockquote, like for example
ludwik
shit… like for example:
Ankur
That’s a great idea. I wanted to do this before, and when I saw this article I almost slapped myself. So obvious, yet so clever. Nice work.
Oliver
Thank you so much! Perfect Tutorial!
Nathan Chapman
I Quite agree with Ankur on this tutorial. Ingenious, and i can’t believe that I did not think of how to do this myself.
Harry Roberts
Good tutorial, very simple but very effective.
Thanks
Sam
Ludwik is right (I can imagine what his examples would have looked like).
According to the w3c, under a strict doctype blockquote is for long quotations (block-level content). Unless you’re using a transitional doctype, text should not be placed directly inside a blockquote element without block-level tags surrounding it. Therefore, if the blockquote is marked up correctly, the method of using
:first-letter
unfortunately won’t work.The only solution I can think of is perhaps applying the bottom-right background image to the blockquote itself and the top-left background image to
blockquote p
. All you’d have to do then is cancel out the top-left background image for any subsequent paragraphs, using something likeblockquote p ~ p { background: none; }
.The same technique could be used for the drop-cap:
blockquote p:first-letter { font: italic 1.4em Georgia; }
blockquote p ~ p:first-letter { font: normal 1.2em Georgia; }
.You might run into some trouble when quoting content other than straight-forward paragraphs though (such as a list). Hope that helps.
Stavanger
Good example, but this doesn’t work in IE 6, does it?
Wolf
Good, but useless in production work since it doesn’t work in IE6.
Nick
Stavanger and Wolf:
Sure, it works in IE 6. I tested in IE6, IE7, Opera, Firefox, and Safari.
Stavanger
Thanks for the confirmation Nick. I asked the question because IE 6 doesn’t support child selectors (>), not even :hover outside of link. This thread http://archivist.incutio.com/viewlist/css-discuss/21459 also discuss some interesting stuff. It looks like IE6 support fo :first-letter is off and on, I’ll take a look next time I have a change bootcamping.
Nick
Steffen:
Thanks for your input. Unfortunately IE doesn’t support CSS selectors.
Steffen Giers
You can also use this css:
blockquote p:before {
content: open-quote;
}
blockquote p:after {
content: close-quote;
}
This will only work in a modern Browser but it’s nice and quite simple. You can also use additional CSS to style the quotes. E.g. a bigger font size or an other color. take a look
Dave
@Nick: That wont matter when IE’s market share drops below 10%… I long await that day *sniff*
Mike
What a great idea. Thanks for the tutorial, I will start using this in my current project. I owe you one :)
Steffen Giers
You’re welcome.
I know IE sucks in this (and many more other) matter. In this case you should use conditionals comments or (css)hacks.In fact the example above is a great way for a standard conform web browser. IMHO.
Christian Watson
This is a nice technique, but unfortunately of no use to me if it doesn’t validate. On a related note, I put together a pull-quote design showcase that you might be interested in.
Aleksey
Hello Nick.
I see some bug.
The Close button ( X ) don’t transparent. Test on IE6 and MyIE.
And in Opera 8.5 im don’t see the title “Simple Double Quotes” and post “This CSS tutorial will show you how …” to first textarea.
Richie K
first..congrat on the opening nick :)
been looking for the double quote css trick some times now..thanks
checking out your other post now ;)
LeoB
Personally I use two images, because many browsers (first IE) not support yet this css features: first-letter, text-tranform, before, after, etc…
BoltClock
Meh, I’d gladly discriminate against IE since usage is falling behind anyways…
Excellent and del.icio.us article you got there, Nick. Yes I bookmarked this tutorial :D
Mo-Mo
I’ve been looking for an easy way to do this for a while now… thanks for the tutorial! The first-letter code didn’t work for me for some reason, so I used Sam’s suggestion of utilizing the P tag, but now I get 2 open quotes in front of each separate paragraph… the close quote seems to be working fine though… I’ll try again!
firzen
wow, I want to know how to make a div section right in the center of the screen.Just like the ‘preview’ your page show.
thx
rikas
Very nice! :)
I’ve been using a much more complicated way of doing the same thing!
Sam
@ Mo-Mo:
As I said, try sticking
blockquote p ~ p { background: none; }
in the css. That should do the trick. :)Mo-Mo
@Sam:
Thanks… that worked! I never used the “~” when I coded before, so I forgot to put that in. :D
Paul Davis
Pretty cool but, don’t forget the (often overlooked) CITE attribute.
It should show where the blockquote came from. I know the problem is the browsers don’t give people a way do do anything with it but, that can be handled with a little js.
I made a demo/tutorial here on a hovering tooltip for the title and cite attributes
http://willcode4beer.com/tips.jsp?set=blockquoteHover
But, I am sure you could style it to look much better ;-)
Tony Scialdone
Maybe you’re making things too complicated. For XHTML, a blockquote should include a block-level element, as seen here:
http://www.w3schools.com/tags/tag_blockquote.asp
So, you have two places for background images. If you put the opening quotes in the first paragraph, and put the closing quotes in the blockquote, you’ll be just fine in most cases.
Ed Knittel
@Sam: That technique does not work in IE6.
Sam
True Ed, but at least it’s valid. I’m sure you can target IE6 with some other fancy styling if you want. :)
jackprince
great stuff!
helimeef
Nothing works in IE6…..
omaha online
I dont even remember how i reached your site but it doesnt matter, cause i’m so happy i found it, it really made me think, keep up the good work
mumebuhi
It works in IE6.
The first-letter pseudo element is supported:
http://www.microsoft.com/technet/prodtechnol/ie/reskit/6/part3/c11ie6rk.mspx?mfr=true
El mas chido
Para ser feliz no se nesesita ser rico
Web Designer
Very good guide … delicious’ed and dugg accordingly :)
Luxbot
Thank You for this site! I mean the design is awesome! The bots and I will be regular visitors now!
Be well!
-LB
Sava
Nice and simple even with 2 images. But I guess the first image isn’t that necesary … maybe a background color would be much easier to use and faster to load and also would fit your site better :D
fanboy
I always thought there would be an easy way of doing that. Very simple and clean.
Hige
Hi there, well i tried to do this in blogsome but doesn’t worked.. can someone help me?
thanks!
Bryce
Does anyone else have trouble getting the quote image to appear? i have copied the html and css exactly as well as put the images in the correct directory. And for some reason, it just wont work in either IE7 or Opera. All the formatting worked the images just don’t show up.
I am sure i made some stupid mistake but i wanted to double check first.
Hakan
very good thanks
Ryan Kelly
hmm.. How about you use <blockquote><p>Some text here</p></blockquote> ?
I thought that was the way you were supposed to do it in XHTML?
Robert
There is actually a problem implementing your method when the image is bigger then the font, although this can be fixed by giving a bigger font, i think it’s not recommended. The other bigger problem i see is when the last letter is not in the end of the line so the last ending quote wont be near it. The best solution i could come up and it works in FF2 and IE7 is just use:
blockquote {
margin: 15px 15px 0 15px;
padding-right: 30px;
background: url(images/blockquote_end.gif) no-repeat bottom right;
}
blockquote p {
background: url(images/blockquote_start.gif) no-repeat top left;
padding-left: 35px;
}
so 2 images are used. But it would cause problems if there are 2 paragraphs in a 1 blockquote…
TheSites
Nice, I’ve used this with other images then the quotes. Very good way to make something stand out.
Aisyah
hmm.. this method works. but what it doesnt work with
<blockquote><p> text here</p></blockquote>
any idea?
sunrise
it’s cool, thank you for this site!
David Jacques-Louis
Will use on my site for sure.
Vidanjör
How about you use
?
I thought that was the way you were supposed to do it in XHTML?
unitechy
thanks will use this ..its great
fr
with the element, specifying the language, you will obtain a more simplistic quote symbol. It is not as nice looking but it is coherent with accessibility principles and visual agents.
pipay
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;
}
testing
pipay
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;
}testing
pipay
kinda confuse here and im sort of novice with css.. where shoud i put my text on this code: 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;
}
gigaturn
Actually, I was looking for big double quote image at the end of para/quote.
natalia herrera
it’s very interesting this site!!
Blog Sites
Good sample, It’s require widely in community sites.
rince
good
DAN
Is there a way to get the last comment to directly follow the lost word of the paragraph? I am trying to use this as a header on a page and I can’t get it to follow the last word. It goes to the end of the space and not the word?
Any thoughts?
of2513
reiozfy jmcegoi hnretja xvnosqi
Kristian
Nice tutorial and a good looking page.
Danh ba web 2.0
Thanks you very much !
It’s very useful
Fortune Cookie Soap
I found it nessesary to change the text indent for IE7 – not sure if anyone else had this issue so thought I’d share… Great sample though, I think I’ll use it for my blog comments…
/*Start hack for IE */
* html blockquote
{
text-indent: -10px;
}
/*End hack for IE */
Teknoloji Platformu
thank’s for share our
walson ma
Your web page ‘s design look very good. I learn a lot of things from your web site. Thank you
ntas
thank’s for share our
Eric Martindale
Great tutorial, but what happens when you want to use the following code:
text-align: justify;
…to justify the contents of the blockquote? I’m noticing that the hanging indent changes are causing the first word to sometimes overlap the contents of the sentence (Google Chrome 1.0.154.36).
Any idea on how to prevent that from happening?
live dealers casino
I really, truly am glad I found this site. It has answered so many questions for me. I will be back. Thank You
Odwa
i am using a text box type of field in a details view, now when i’m typing “1” it changes to “&qoutes 1 &qoutes” now i want to fix that.
tacohell
i luv u for this tut
Natalie
Thanks you
Jasmeet
very nice technique…
The Bible Post
This is exactly what I have been looking for. Thank you!
Ben
Hey, what happened to the content: open-quote; property?
Oh well.
Bill
Your web page ’s design look very good. I learn a lot of things from your web site. Thank you
bagsin
I really, truly am glad I found this site. It has answered so many questions for me. I will be back. Thanks
Cyrus
Great , Simple Double Quotes
Great article. CSS saved web design
Cyrus
Visit http://www.psdtoxhtmlcoder.com
prabhu
i luv u for this Technique…. Useful Tips.
panel radyatör
thasnk so much
Mike
Great tut, thank you
Steve
Thanks for great code, just what I was looking for. But I must be doing something wrong as it works perfectly on Safari browser on Mac and PC and Google Chrome on a PC, but on FireFox and IE on both Mac and PCs the open-quote graphic and first-letter code don’t show.
Any ideas where I went wrong here http://totalfmc.com
Thanks in advance.
Keith Davis
Once again I am a little wiser…blockquote.
Nice simple CSS coding example, I’m sure I shall use it in the future.
Chelny
thanks thanks thanks!!! :)
Nice blog layout by the way :)
Ashley Farrand
Thank you so much! This saved me.
Hugo
well i think there is 1 problem, small but, i can’t select the first leter.. :/
bob
Steve – get rid of the paragraph tags within the blockquote and it will work.
It doesn’t work in IE8 though as the closing blockquote background rules get overwritten by the first-letter rules – works fine in compatibility mode though.
Marco
It works but it’s not the solution when you have to quote a dynamically generated text. The problem is the closed quote that can overlap the ending letters of your text.
Try to quote this text in your example page:
Hello, I’m a gggg gggg ggg beautiful pullquote, hfghssf hgd dgdgd sdsds sdsdsds sdsdsds sdsds
(I use FF 3.6)
bursa psikolog
thanks so muck
ubalin webblog
Thanks for info. aku mau coab dulu, mudah-mudahan berhasil
Michelle
What do you mean by getting of the paragraph tags within the blockquotes? Could you give examples? Thanks! (:
Catalin C.
It works fine.
Thank you.
Included it in my frontend framework.
Ramona
The same problem like Hugo has: I cannot style the first:letter. There is no other blockquote definition in my styles.
Chris
Ummm, if this works – then why is your example an image dump!
Progs4u
Thank you so much ..
You are very cool
eka
thank you so much for sharing :p
hurdaci
I think type of site that is useful
Haliyikama
Share admin thans a lot for sharing a very successful.
Buz
admin thanks for this website
Cöp Konteyner
I always follow your site thank you
Adnan
Nice trick with first-letter css. But if you change your text content (just one more single character at the end of your example text) you’ll see it is over the closing quotation symbol. I think a padding-right will be good.
I’m not sure is it possible to use something like last-letter? I’m looking for something like that which will place the ending quotation right after the end of last letter and not at the right-bottom of the blockquote box.
Thanks
Adnan
iphone
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
rRomila
U saved my day :) gud job
Stephan
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.
ESET
thanks thats great website
tütüne son
I think a padding-right will be good.
Henry Peise
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!
Juno Mindoes
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!
Melvins
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
Uçak Bileti
denedim çalışıyor
Ben
Thanks for sharring importent information in this blog.It was very nice.
tütüne son
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.
altın çilek
thanks thats great website
شات صوتي
thnks
goooooooooooooood
min:(
:)
hooob
Tchat
Thanks, i searched everywhere for this double quotes trick.
kilo aldirici
ignore weight
ADD~``
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:)
dexx
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
jpatti
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.
Bob Marley
JPatti is right. This method does not work with IE8. It looks great in Firefox though. Any ideas?
Vibram Bikila Mens
Another thing is that when searching for a good on the web electronics store, look for online stores that are regularly updated, trying to keep up-to-date with the most current products, the most effective deals, and also helpful information on goods and services. This will ensure that you are doing business with a shop that really stays atop the competition and offers you what you ought to make knowledgeable, well-informed electronics expenditures. Thanks for the essential tips I have really learned through your blog.
complex 41
These are really stunning, there are even some sites that are new to me. All the colour schemes complex 41are definatly brave but I really think they work to make the sites eye catching and engaging.
njoy
TFS your site’s design shares a very nice thank you
web tasarim istanbul
Everything was very nice great wonderful color matching shares
Makhan Butt
How use Quotations in CSS
http://www.handycss.com/tips/adding-quotations-using-css/
resimler
The closing date is May 2012 right ?
resimler
definitely, a BIG BIG deals.thx, for article
Ramonius
Nice article!
What also worked for me was:
#id a {
padding-left: 18px;
text-indent: -18px;
line-height: normal;
display: block;
}
#id a:before {
content: open-quote;
}
#featured a:after {
content: close-quote;
}
This doesn’t require images.
Ramonius
“#featured a:after” ofcourse has to be “#id a:after” in this example.
K
only shows the bottom quotation mark tho.. this is the third tutorial i’ve seen but i see the samples working fine on each website except when i place it on mine. im using IE8 at this pc and tried compatibility mode and still the other image doesnt show..
how do you make the command on “blockquote:first-letter { ” work? other sites suggested
blockquote span {
-OR-
blockquote div {
but still only the ones inside the code “blockquote {” shows..
any help would be appreciated. thanks!
Anglea Mixer
Nice blog here! Also your web site loads up very fast! What host are you using? Can I am getting your affiliate hyperlink on your host? I desire my website loaded up as fast as yours lol
DymoLabels
hey
i really like your code
i needed it badly
thanks for sharing