Jul 29

Tagged in: , Comments:Add

Simple Double Quotes

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.

Delicious Stumbleupon Digg

30 Artistic Flash Sites Illustrating the Flower Pattern

Comments

Pages: 9 8 7 6 5 4 3 2 1 » Show All

There are 86 comments (+Add)

  • 86 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.

  • 85 Hugo

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

  • 84 Ashley Farrand http://www.farrdesign.net

    Thank you so much! This saved me.

  • 83 Chelny http://ohsix2twice.tumblr.com/

    thanks thanks thanks!!! :)

    Nice blog layout by the way :)

  • 82 Keith Davis http://easypublicspeaking.co.uk/

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

  • 81 Steve http://totalfmc.com

    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.

  • 80 Mike http://www.comastore.com

    Great tut, thank you

  • 79 panel radyatör http://www.emkoisi.com

    thasnk so much

  • 78 prabhu http://codinggeek.com

    i luv u for this Technique…. Useful Tips.

  • 77 Cyrus

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

Pages: 9 8 7 6 5 4 3 2 1 » Show All

Post Your Comments

(required)

(required)

Comment Guidelines

  • Please keep comments related to topic. And be nice, don't spam!
  • Basic HTML tags are allowed:
    <a href> <abbr> <acronym> <blockquote> <code> <em> <strike> <strong>
  • Note: un-related or spam comments will be deleted.

Live Comment Preview

Back to top