Creating a Pull-Quote Effect With CSS

Have you ever noticed that a lot of the content you see on the web looks, well, a little boring? Page layout is a sub-discipline of graphic design that deals with the arrangment and style treatment of the elements that make up a page of content. The goal of a good page layout is to pull readers into an article, highlight key elements and generally keep the user's interest as long as possible. Frankly, magazine articles in print publications tend to be much more effective at this than online articles.

This simple technique will allow you to add pull-quotes to your online articles.However, there is no intrinsic reason that page layouts for online articles cant't be more interesting than the the average run-of-the-mill web site. One technique often used in print publications is the pull-quote, sometimes referred to as a liftout quote.

A pull-quote is a quote or excerpt from an article that is placed in a larger, more prominent typeface on the same page, serving to pull the reader's eye to the page and to highlight a key concept.

Pull-quotes can easily be incorporated into online articles with just a minor bit of CSS. The style shown below creates a pull-quote effect with the quote appearing on the left side of the content area of an article (as illustrated above).

      .ws_pull_quote {
      margin: 12px 8px 12px 0;
      display: block;
      width: 170px;
      float: left;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 1.6em;
      font-weight: bold;
      line-height: 1.2em;
      color: #1E629E;

The CSS style defines the text to which the style is applied to be a block, which basically means that the text will be considered as a single unit when the web browser attempts to determine where to place it on the web page. Next, the "float" attribute is set to "left." When the web browser encounters this pull-quote element, it should place it on the left and flow the article content around it. The style also sets margins so the content will be set off nicely.

To use the style, simply set up your HTML as shown below:

<p><span class=ws_pull_quote>Your Quote</span> Paragragph of text</p>

This simple technique will allow you to add pull-quotes to your online articles. Like all eye-catching techniques, it should be used in moderation.


No comments yet. Be the first.

Leave a Comment

Comments are moderated and will not appear on the site until reviewed.

(not displayed)