Creating A Stylized Pull Quote or Blockquote Using CSS

/ CSS / by Paul Robinson / 11 Comments

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.

11 Comments

Author’s gravatar

Great tutorial – I hate using plugins and this worked wonderfully. I’m no designer, however, and would love to align the entire quite either left or right – can you tell me how to do that? Thanks!

Reply
Author’s gravatar author

Your best bet is probably to float the entire thing using float: left; or float: right; int the blockquote. Just remember to clear it. If you want the text aligned too just add text-align: right; or text-align: left;.

Hope that helps.

Author’s gravatar

Disregard – I figured it out. Thanks again.

Author’s gravatar

Nice tutorial, simple and easy to use, however how can i color the background

Thanks

Reply
Author’s gravatar author

Well you’d add it as a background-color: Hexcode; in the .blockquote rule. Not sure how good it would look though. 😉

Oh and happy New Year. 🙂

Author’s gravatar

Hi,

Happy new Year,

Okay i got that part working, but then it needs to only cover the text area how would i control the size of area to cover, width and height..?

Thanks

Reply
Author’s gravatar author

You would need to place another tag around the text inside the blockquote & target that.

Author’s gravatar

Hi,

worked it out this colors the background area of the text and quotes,

blockquote
{
background-color: #EFEFEF;
width:50%;
height:6em;
}

Reply
Older Comments
Newer Comments

Leave a Reply

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.

I'll keep your WordPress site up-to-date and working to its best.

Find out more