Nice Pull Quotes With CSS

quote

A common way of emphasizing a small part of a page's content is by using pull quotes.

Pull quotes are short blocks of text, taken out of the main flow of content, to emphasize a point. They are usually styled in a way that will separate them from the main body text. Today I will show you how to style pull quotes, so that you can use them effectively.

The CSS

Pull quotes are very easy with a bit of CSS. To create them, we will used a blockquote with certain styles applied.

.pullquote {
    width: 300px;
    float: right;
    margin: 5px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-style: italic;
}

“Pull quotes are short blocks of text, taken out of the main flow of content, to emphasize a point.”

You can see an example to the right. The width can be anything you want. I would generally have these aligned to the right, because the reader's eyes will be drawn to it, but to still keep it separated from the main body of text.

The 5px margin can also be changed to your liking, to add more or less space between the main body text and the pull quote.

Other Things You Can Do With This

Pull quotes are short blocks of text, taken out of the main flow of content, to emphasize a point.

You can still do even more to make your pull quotes look nicer. Some examples include hanging quotation marks, background images and styled quotation marks.

Here is the CSS to make the example to the right:

.pullquote {
    width: 300px;
    float: right;
    margin: 5px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-style: italic;
    text-indent: -1.3em;
}
 
.pullquote:before {
    content: "“ ";
    font-size: xx-large;
    font-weight: bold;
}
 
.pullquote:after {
    content: " ”";
    font-size: xx-large;
    font-weight: bold;
}

Do you ever use pull quotes? How are they styled on your site? Be sure to leave your answer in a comment.

Stay Updated

Did you enjoy this post? Don't miss a single post by getting free updates!

11 Comments

  1. January 23, 2010

    This is great, I prefer pullquotes over blockquotes but never knew how to do it.

    I'll be using this. Thanks!

  2. January 23, 2010

    The free Copyblogger WP theme included the pullquote functionality. I always wondered how I could do it. Thanks for sharing!

  3. January 24, 2010

    This is a great resource for anyone looking to improve their skills with css.

  4. January 26, 2010

    Ooh, I like the one with hanging quotes!
    I did not know you could even do that completely in CSS.

    Does this require CSS3? or does CSS2 still work?

    • January 26, 2010

      These all use plain CSS2. That means that they should probably even look okay in IE!

  5. January 26, 2010

    Nice one. Very simple and elegant. I like it.

    I think I am going to use this on my site in the future, with you permission of course.

    • January 27, 2010

      Don't worry about permission. You can use whatever is created with these tutorials on your site as much as you want, without having to ask me.

      But if you don't mind, I'd love to see how you're using it :)

  6. February 3, 2010

    I like it, maybe I will impalement some of your tips to my blogs!

    nice design by the way!

  7. April 28, 2011

    Goodness, that is beautiful. Thanks for this brilliant solution to Pullquotes! :) Rock on.

Trackbacks/Pingbacks