Grow your CSS skills. Land your dream job.

Better Blockquotes with CSS

Published by Chris Coyier

betterblockquotes.gif

Blockquotes are HTML elements that are meant to designate when a particular section of text is being taken from another website or other source. Different browsers have different built-in styling for blockquotes, often just a simple left margin. If you use a lot of quotes, as bloggers often do, it is a good idea to take control of this element and give it some CSS style!

A popular technique is to put large graphical Quotation marks at the upper left and lower right of the blockquote area. In these pre-CSS3, non-multiple-background days, there is no good way to do this without a little extra HTML. The easiest technique is to add a <span> element along with the <blockquote> element. Not ideal, but it works. You can apply most of the styling the blockquote element in your CSS and then set the second background image with the span. Upper left and lower right respectively.

I have put together an example page with 5 different examples of different, simple things you can do with blockquotes.

[LIVE EXAMPLE]

[DOWNLOAD EXAMPLE]

Comments

  1. Permalink to comment#

    Hey, Thanks! Go on with these tricks, they are cool!

  2. Very good ideas. They all work perfectly in the big 3 browsers as well.

  3. Permalink to comment#

    hey, nice topic

  4. LPent
    Permalink to comment#

    According to most style/typography standards, block quotes should not have quote marks. They should be indented instead. Only in-line quotes take quote marks.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".