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.

Preview double quotes

Download HTML file

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:

step 2

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;
}

step 3

Pullquote style

If you want to make a pullquote, simply specify the blockquote float left or right. View my pullquote sample.

133 Comments

ludwik
Jul 30, 2007 at 5:05 am

btw. it’s not necessarily but you should use block elements inside your blockquote, like for example

ludwik
Jul 30, 2007 at 5:06 am

shit… like for example:

Ankur
Jul 30, 2007 at 5:09 am

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
Jul 30, 2007 at 6:38 am

Thank you so much! Perfect Tutorial!

Nathan Chapman
Jul 30, 2007 at 6:38 am

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
Jul 30, 2007 at 7:35 am

Good tutorial, very simple but very effective.

Thanks

Sam
Jul 30, 2007 at 7:10 am

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 like blockquote 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
Jul 30, 2007 at 9:06 am

Good example, but this doesn’t work in IE 6, does it?

Wolf
Jul 30, 2007 at 12:56 pm

Good, but useless in production work since it doesn’t work in IE6.

Nick
Jul 30, 2007 at 1:00 pm

Stavanger and Wolf:

Sure, it works in IE 6. I tested in IE6, IE7, Opera, Firefox, and Safari.

Stavanger
Jul 30, 2007 at 9:05 pm

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
Jul 31, 2007 at 5:25 pm

Steffen:

Thanks for your input. Unfortunately IE doesn’t support CSS selectors.

Steffen Giers
Jul 31, 2007 at 4:38 pm

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
Jul 31, 2007 at 7:45 pm

@Nick: That wont matter when IE’s market share drops below 10%… I long await that day *sniff*

Mike
Jul 31, 2007 at 11:35 pm

What a great idea. Thanks for the tutorial, I will start using this in my current project. I owe you one :)

Steffen Giers
Aug 1, 2007 at 1:15 am

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
Aug 1, 2007 at 2:07 pm

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
Aug 2, 2007 at 4:29 am

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
Aug 3, 2007 at 3:59 am

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
Aug 3, 2007 at 4:27 am

Personally I use two images, because many browsers (first IE) not support yet this css features: first-letter, text-tranform, before, after, etc…

BoltClock
Aug 3, 2007 at 10:24 am

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
Aug 3, 2007 at 1:01 pm

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
Aug 4, 2007 at 4:21 am

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
Aug 4, 2007 at 12:40 pm

Very nice! :)

I’ve been using a much more complicated way of doing the same thing!

Sam
Aug 4, 2007 at 5:02 pm

@ Mo-Mo:
As I said, try sticking blockquote p ~ p { background: none; } in the css. That should do the trick. :)

Mo-Mo
Aug 5, 2007 at 1:19 pm

@Sam:
Thanks… that worked! I never used the “~” when I coded before, so I forgot to put that in. :D

Paul Davis
Aug 6, 2007 at 8:42 am

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
Aug 6, 2007 at 5:04 pm

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
Aug 7, 2007 at 11:44 am

@Sam: That technique does not work in IE6.

Sam
Aug 7, 2007 at 2:19 pm

True Ed, but at least it’s valid. I’m sure you can target IE6 with some other fancy styling if you want. :)

jackprince
Aug 9, 2007 at 4:34 am

great stuff!

helimeef
Aug 13, 2007 at 9:11 pm

Nothing works in IE6…..

omaha online
Sep 3, 2007 at 9:15 pm

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
Sep 4, 2007 at 3:08 pm

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
Sep 11, 2007 at 10:34 am

Para ser feliz no se nesesita ser rico

Web Designer
Sep 24, 2007 at 5:47 pm

Very good guide … delicious’ed and dugg accordingly :)

Luxbot
Oct 24, 2007 at 5:36 am

Thank You for this site! I mean the design is awesome! The bots and I will be regular visitors now!

Be well!
-LB

Sava
Oct 24, 2007 at 11:26 am

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
Oct 29, 2007 at 9:09 am

I always thought there would be an easy way of doing that. Very simple and clean.

Hige
Nov 9, 2007 at 11:21 pm

Hi there, well i tried to do this in blogsome but doesn’t worked.. can someone help me?

thanks!

Bryce
Jan 11, 2008 at 1:53 pm

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
Jan 19, 2008 at 2:52 pm

very good thanks

Ryan Kelly
Jan 26, 2008 at 5:14 pm

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
Feb 3, 2008 at 2:57 pm

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
Feb 7, 2008 at 9:44 pm

Nice, I’ve used this with other images then the quotes. Very good way to make something stand out.

Aisyah
Feb 15, 2008 at 2:20 am

hmm.. this method works. but what it doesnt work with

<blockquote><p> text here</p></blockquote>

any idea?

sunrise
Feb 20, 2008 at 7:54 pm

it’s cool, thank you for this site!

David Jacques-Louis
Feb 23, 2008 at 6:35 am

Will use on my site for sure.

Vidanjör
Mar 5, 2008 at 4:30 am

How about you use

Some text here

?
I thought that was the way you were supposed to do it in XHTML?

unitechy
Mar 17, 2008 at 10:52 am

thanks will use this ..its great

fr
Apr 28, 2008 at 2:39 am

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
May 14, 2008 at 11:52 am

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
May 14, 2008 at 11:53 am

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
May 14, 2008 at 11:57 am

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
May 16, 2008 at 11:40 pm

Actually, I was looking for big double quote image at the end of para/quote.

natalia herrera
May 20, 2008 at 4:16 pm

it’s very interesting this site!!

Blog Sites
Jun 28, 2008 at 9:44 am

Good sample, It’s require widely in community sites.

rince
Jul 2, 2008 at 12:21 am

good

DAN
Jul 22, 2008 at 6:01 pm

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
Aug 1, 2008 at 2:55 am

reiozfy jmcegoi hnretja xvnosqi

Kristian
Sep 3, 2008 at 11:57 am

Nice tutorial and a good looking page.

Danh ba web 2.0
Sep 19, 2008 at 6:59 am

Thanks you very much !
It’s very useful

Fortune Cookie Soap
Oct 13, 2008 at 6:01 pm

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
Oct 27, 2008 at 9:32 pm

thank’s for share our

walson ma
Nov 5, 2008 at 11:09 pm

Your web page ‘s design look very good. I learn a lot of things from your web site. Thank you

ntas
Nov 26, 2008 at 5:53 pm

thank’s for share our

Eric Martindale
Dec 31, 2008 at 11:58 am

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
Jan 30, 2009 at 3:20 am

I really, truly am glad I found this site. It has answered so many questions for me. I will be back. Thank You

Odwa
Feb 25, 2009 at 4:01 am

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
Apr 15, 2009 at 10:35 pm

i luv u for this tut

Natalie
Apr 22, 2009 at 12:13 am

Thanks you

Jasmeet
Apr 27, 2009 at 7:47 am

very nice technique…

The Bible Post
May 28, 2009 at 2:29 am

This is exactly what I have been looking for. Thank you!

Ben
Jun 6, 2009 at 12:38 pm

Hey, what happened to the content: open-quote; property?

Oh well.

Bill
Sep 4, 2009 at 10:04 pm

Your web page ’s design look very good. I learn a lot of things from your web site. Thank you

bagsin
Sep 10, 2009 at 7:25 pm

I really, truly am glad I found this site. It has answered so many questions for me. I will be back. Thanks

Cyrus
Sep 21, 2009 at 12:31 pm

Great , Simple Double Quotes
Great article. CSS saved web design
Cyrus
Visit http://www.psdtoxhtmlcoder.com

prabhu
Oct 19, 2009 at 2:26 am

i luv u for this Technique…. Useful Tips.

panel radyatör
Oct 24, 2009 at 8:52 am

thasnk so much

Mike
Oct 31, 2009 at 4:14 am

Great tut, thank you

Steve
Nov 11, 2009 at 8:00 am

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
Dec 16, 2009 at 3:33 pm

Once again I am a little wiser…blockquote.
Nice simple CSS coding example, I’m sure I shall use it in the future.

Chelny
Dec 27, 2009 at 9:58 pm

thanks thanks thanks!!! :)

Nice blog layout by the way :)

Ashley Farrand
Jan 5, 2010 at 1:52 pm

Thank you so much! This saved me.

Hugo
Jan 10, 2010 at 7:55 pm

well i think there is 1 problem, small but, i can’t select the first leter.. :/

bob
Feb 4, 2010 at 10:00 pm

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
Feb 24, 2010 at 7:00 am

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
Mar 16, 2010 at 12:54 pm

thanks so muck

ubalin webblog
Apr 14, 2010 at 5:25 am

Thanks for info. aku mau coab dulu, mudah-mudahan berhasil

Michelle
May 17, 2010 at 10:50 pm

What do you mean by getting of the paragraph tags within the blockquotes? Could you give examples? Thanks! (:

Catalin C.
May 29, 2010 at 9:04 am

It works fine.
Thank you.
Included it in my frontend framework.

Ramona
Jun 7, 2010 at 6:33 am

The same problem like Hugo has: I cannot style the first:letter. There is no other blockquote definition in my styles.

Chris
Jun 10, 2010 at 11:13 am

Ummm, if this works – then why is your example an image dump!

Progs4u
Jul 6, 2010 at 11:07 pm

Thank you so much ..
You are very cool

eka
Jul 16, 2010 at 1:38 pm

thank you so much for sharing :p

hurdaci
Aug 20, 2010 at 10:38 am

I think type of site that is useful

Haliyikama
Aug 21, 2010 at 8:43 am

Share admin thans a lot for sharing a very successful.

Buz
Aug 23, 2010 at 7:08 am

admin thanks for this website

Cöp Konteyner
Aug 28, 2010 at 8:53 am

I always follow your site thank you

Adnan
Sep 3, 2010 at 11:37 pm

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
Sep 16, 2010 at 5:36 am

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
Oct 6, 2010 at 3:45 am

U saved my day :) gud job

Stephan
Oct 21, 2010 at 7:16 am

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
Oct 29, 2010 at 10:22 am

thanks thats great website

tütüne son
Nov 24, 2010 at 4:51 am

I think a padding-right will be good.

Henry Peise
Dec 24, 2010 at 2:46 am

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
Dec 25, 2010 at 1:59 am

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
Jan 10, 2011 at 1:24 am

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
Jan 11, 2011 at 2:40 pm

denedim çalışıyor

Ben
Jan 14, 2011 at 10:01 pm

Thanks for sharring importent information in this blog.It was very nice.

tütüne son
Jan 27, 2011 at 3:22 pm

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
Feb 2, 2011 at 7:09 am

thanks thats great website

شات صوتي
Feb 8, 2011 at 5:49 am

thnks
goooooooooooooood
min:(

:)
hooob

Tchat
Feb 12, 2011 at 2:26 pm

Thanks, i searched everywhere for this double quotes trick.

kilo aldirici
Feb 17, 2011 at 5:56 pm

ignore weight

ADD~``
Feb 21, 2011 at 8:52 pm

Why do you add the “text-indent:-18px;” at first? At the 3rd step, you add a “padding-left:18px;” for the first-letter.

شات كتابي
Feb 27, 2011 at 2:28 am

thnks

gooooooooooooooood

min:)

dexx
Apr 17, 2011 at 2:13 pm

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.

شات عسل
Apr 20, 2011 at 4:24 pm

The last example adds demonstrates a couple more features that make

jpatti
Apr 28, 2011 at 6:05 pm

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
May 7, 2011 at 11:16 pm

JPatti is right. This method does not work with IE8. It looks great in Firefox though. Any ideas?

Vibram Bikila Mens
Jun 24, 2011 at 3:30 pm

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
Aug 4, 2011 at 9:59 am

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
Jan 27, 2012 at 10:34 am

TFS your site’s design shares a very nice thank you

web tasarim istanbul
Feb 8, 2012 at 9:16 am

Everything was very nice great wonderful color matching shares

Makhan Butt
Apr 23, 2012 at 4:06 am

How use Quotations in CSS

http://www.handycss.com/tips/adding-quotations-using-css/

resimler
May 2, 2012 at 11:22 am

The closing date is May 2012 right ?

resimler
May 2, 2012 at 11:27 am

definitely, a BIG BIG deals.thx, for article

Ramonius
May 23, 2012 at 3:24 am

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
May 23, 2012 at 3:31 am

“#featured a:after” ofcourse has to be “#id a:after” in this example.

K
May 23, 2012 at 1:43 pm

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
Jun 22, 2012 at 9:47 pm

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
Jun 1, 2013 at 10:51 am

hey
i really like your code
i needed it badly
thanks for sharing

Post Comment or Questions

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.