copyright © CSSPG, lud May 09 1999


 for practical use of CSS

CSS Example: Pullquotes

this document is located at...
<URI:http://css.nu/examples/pullquotes.html>

* Pullquotes *


Pullquotes  An interesting technique for emphasizing segments of text is the pullquote. This technique offers a way to emphasize certain key words in running text, and offers an easy way to highlight certain concepts as they are introduced.


Technique  Combination of this technique with other typographic conventions, such as first line indent, would prove too distracting visually, and should be avoided. In this example, a sans-serif font was used, with italics, to further emphasize the pullquote.


Lengthy quotes  For pullquotes which are particularly lengthy, some 'tweaking' by CSS authors may be needed, to ensure that the aesthetics remain intact. A strong suggestion would be to ensure that you have adequate text to wrap under the pullquote, so that re-sizing will not totally destroy inter-paragraph spacing.


Properties  The CSS properties which must be set (and perhaps adjusted) are: width, padding-right, and margins. It is suggested that you avoid the use of absolute values for fixing the size of the text, padding and width. Using relative values like em and smaller allows the pullquotes to retain their relationship to the text, even when the window is re-sized.


Thanks to "Yucca" for suggestions.


CSS Pointers Navigation
Index · Browser Bugs · Books · Tools · DHTML · XSL & DSSSL
Main Site Navigation
Index · Articles · Examples · Experiments · FAQ · Markup · Styles · Who is?
CSSPG ~ Sue ~ Roland
Validate markup Check CSS