Creating A Stylized Pull Quote or Blockquote Using CSS

This is a very simple tutorial, but I’m hoping that it might be useful to you guys & gals. It’s quite a simple style of quote, but the colors can all be customized as you like.

First let’s have a peek at what the finished quote will look like.

“This is a quote”

Like I have always said, I’m not the best at design so feel free to change colors as you wish.

Now let’s take a look at how it’s made. First up is the HTML.

You could use the content property to add in the quotes to remove the need for the spans. I did try, but unfortunately there seemed to be too many problems between browsers for it to be usable at the moment. Most notably Chrome doesn’t seem to support the open-quote value for it’s content property yet.

Anyway the HTML is simple. We have a blockquote tag. A span with the HTML entity for the left double quotation mark (“) inside. The quotes text. Finally another span with the right double quotation mark (&#8221).

Now let’s take a look at the CSS.

To move the quotes to the positions shown we just set their positions relative & move then using ems rather than pixels. Using ems keeps the quotation marks in the correct position if the size of the font in the blockquote is changed. That is pretty much it.

I hope this tutorial has helped you out in some way, I created it after a few requests from people asking how to create this type of quote. If you have an questions or you want to add something please use the comments below.

BlockquoteCSSPull QuoteStylized