Pro HTML5 and CSS3 Design Patterns

CHAPTER 19 ■ CALLOUTS AND QUOTES

Block Quote

HTML

<h1>Block Quote</h1>

<blockquote><div>

<p>A block quote contains one or more paragraphs, and a citation.

A block quote is not repeated twice in the document like a callout.</p>

<p>This example includes an embedded, decorative division so it can display

a graphical closing quote.</p>

<cite>Pro HTML5 and CSS3 Design Patterns<cite>

</div></blockquote>

CSS

blockquote { width:500px; margin:10px auto;

position:relative; left:0%; text-align:justify;

line-height:1.3em; color:black;

padding-top:40px; padding-left:40px;

background:url("dq1.jpg") no-repeat top left; }

blockquote div { padding-bottom:10px; padding-right:40px;

background:url("dq2.jpg") no-repeat bottom right; }

blockquote p { margin:0; margin-bottom:10px; }

blockquote cite { display:block; text-align:right; font-size:0.9em; }