Pull Quotes - Dreamweaver Typography
In this tutorial you will discover how to take a block quote html tag and change it into an interesting and engaging typographical pull quote. Your website visitors will be immediately be drawn to the pull quotes content because it stands out from the rest of the page content. Take a look at this typographical web page example. Pull quotes have larger font sizes than your regular paragraph content and are usually styled either with graphical background elements or with a simple side border like in pull quote example on the right.
A pull quote is a line of text that you may want to draw the reader’s attention to.
A pull Quote is a line of text that you may want to draw the reader’s attention to. In fact, the beginning of this paragraph is in the pull quote to your right.
Notice how the pull quote is pushing the text in this paragraph away. You could mistakenly think that the pull quote is in its own div tag or is an image. But you would be wrong. The pull quote is simply an html block quote which has CSS styles applied to it to float to the right. The paragraph adjacent to it seemingly collapses but is then pushed away using a padding left attribute. Putting any text inside of a block quote tag will also make it a block level element.
1. The Block Quotes HTML
Separate the text you would like to put into a pull quote from the paragraph it is in and wrap the text inside of a blockquote html tag:
<p> paragraph text </p> <blockquote> This is the Pull Quote text in between the blockquotes </blockquote> </p> Paragraph text </p>
To get the best possible outcome for your pull quote and to look its best, you will need more paragraph content than in the example above.
2. Style the block quotes html tag using CSS
The font size of your block quote css should generally be larger than your page content’s font size. It is necessary to float the block quote right or left depending on where you would like your finished pull quote to appear. A width is set to the block quote to define its size and shape relative to the rest of the page content. And padding is set to the left to push away the adjacent paragraph. A line height is set to make the text in the pull quotes more distinguished. For more visual creativity, a thick 8 pixel solid border has been set.
blockquote { font-size:20px; float:right; width:220px; border-left:8px solid #C60; padding-left:20px; line-height:30px; }
The CSS is a generic example of the styling that would go into an effective pull quote. You should tweak the css to suit your web pages feel and look. In other words, the CSS defined here in the example is not by any means set in stone. Be creative and experiment.
Related Tutorials:
Typography in Web Design - Video Tutorial
Drop Caps Tutorial - Article Tutorial
Drop Cap Typography - Video Tutorial