CHAPTER 19 ■ CALLOUTS AND QUOTES
Left Floating Callout
HTML
<h1>Left Floating Callout</h1><p>A callout makes the key point stand out to the reader.<span class="callout">Makes the key point stand out</span>You can float a callout to the left using <code>float:left</code>.
You can use <code>width</code> to set the callout's width.
You can use <code>margin</code> to put distance between the callout and
text outside the callout. You can use <code>padding</code> to put space
between the callout's internal text and its borders. You can use
<code>position:relative</code> and <code>top</code> to adjust the vertical
position of the callout.</p>CSS
.callout-left { float:left; width:200px; padding:6px;
margin:10px 40px 10px 30px;
position:relative; top:10px;
font-size:22px; line-height:normal; font-weight:bold;
text-align:center; color:black; background-color:gold;
border-left:1px solid black; border-right:1px solid black;
border-top:6px solid black; border-bottom:6px solid black; }