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

1 5 6 7
  1. Bob Marley
    May 7, 2011 @ 11:16 pm

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

    Reply

  2. Vibram Bikila Mens
    Jun 24, 2011 @ 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.

    Reply

  3. complex 41
    Aug 4, 2011 @ 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.

    Reply

  4. njoy
    Jan 27, 2012 @ 10:34 am

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

    Reply

  5. web tasarim istanbul
    Feb 8, 2012 @ 9:16 am

    Everything was very nice great wonderful color matching shares

    Reply

  6. Makhan Butt
    Apr 23, 2012 @ 4:06 am

    Reply

  7. resimler
    May 2, 2012 @ 11:22 am

    The closing date is May 2012 right ?

    Reply

  8. resimler
    May 2, 2012 @ 11:27 am

    definitely, a BIG BIG deals.thx, for article

    Reply

  9. Ramonius
    May 23, 2012 @ 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.

    Reply

  10. Ramonius
    May 23, 2012 @ 3:31 am

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

    Reply

  11. K
    May 23, 2012 @ 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!

    Reply

  12. Anglea Mixer
    Jun 22, 2012 @ 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

    Reply

  13. DymoLabels
    Jun 1, 2013 @ 10:51 am

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

    Reply

1 5 6 7

Leave a Reply