CHAPTER 19 ■ CALLOUTS AND QUOTESBlock Quote
Problem You want to create a block quote. You want to set a quote apart from the rest of the content
and make it easily recognizable as a block quote. You want the block quote to include one or
more paragraphs and a citation. You want it to be styled with graphical opening and closing
quotes.
Solution Like a center callout, a block quote usually has a different font, margins, borders, and
background to set it apart from surrounding content.
You can embed the block quote in the
element. You can use width to set its
width. You can use margin-left:auto and margin-right:auto to center it. You can use
margin-top and margin-bottom to put space above and below it. You can use
position:relative and left to move it to the left or right of center.
You can use background to apply a background image to the block quote. You can use
padding-top and padding-left to put space between the image and the block quote’s text.
You can also embed a division immediately inside the block quote to display a second
background image. You can use padding-bottom and padding-right to put space between
its image and the block quote’s text.
You can use the element to place a citation following the block quote. You can place
any inline content in . A citation represents the title of a work, e.g., a song, a paper,
an essay, a script, etc.
Pattern^
HTML
CSS
blockquote { width:+VALUE; margin:+VALUE;
position:relative; left:±VALUE%;
padding-top:+VALUE; padding-left:+VALUE;
background:url("FILE.EXT") no-repeat top left; }
blockquote div { padding-bottom:+VALUE; padding-right:+VALUE;
background:url("FILE.EXT") no-repeat bottom right; }
blockquote p { STYLING_PARAGRAPHS_IN_A_BLOCKQUOTE }
blockquote cite { STYLING_CITATIONS_IN_A_BLOCKQUOTE }
Location This pattern works only inside block containers because
is a block. See Inline
Block Quote when you need the block quote to be inline.
Tip A block quote can contain any inline content, including images and objects.^
Related to Center Callout, Inline Block Quote, Inline Quote; Display, Block Box (Chapter 4); Width
(Chapter 5); Margin, Padding, Background (Chapter 6); Relative (Chapter 7); Offset Relative
(Chapter 8)