Pullquote Styles

Pullquote is often used in magazines and is usually used to highlight a key point of the article. They are usually implemented in such a way that it is visually recognizable and most of time has a different typeface than the regular magazine typeface. Pullquotes are popular among the bloggers and online news or magazine publication sites.

The same magazine pullquotes can be implemented in webpage with HTML, CSS, and sometimes JavaScript. Some of the popular styles used on the web are the following:

1. Easy CSS Pullquotes

This pullquote style has a heading and background color which makes it standout from the rest of the content. Its uses CSS and HTML so it can be used off-the-shelf. For more information see “Easy CSS Pullquote” or “Easy CSS Inline Pullquotes”.

2. Pullquotes with JavaScript and CSS

This technique uses JavaScript to generate pullquotes dynamically after the page is loaded in browser. The advantage is you don’t need to duplicate content and you can disable it easily if you don’t want to show pullquotes. For more information see “Automatic Pullquotes with JavaScript and CSS”.

3. Pullquote from Title Attribute

In this technique the content of “title” attribute of “p” paragraph tag is shown as pullquote. The implementation is simple CSS trick. For more information see “CSS Pull Quotes”.

-- by Santosh on January 26th, 2008