CHAPTER 20 ■ ALERTS
Run-In Alert
HTML
<h1>Run-In Alert</h1>
<p>Text above the alert.</p>
<div class="alert caution">
<h3><span class="decoration"> </span>Caution</h3>
<p>The Run-In Alert runs the alert's heading into the text using
<code>display:inline</code> on both the heading and the paragraph.</p>
</div>
<p>Text below the alert.</p>
CSS
*.alert { padding-right:20px; padding-top:10px; padding-bottom:10px;
border-top:1px solid black; border-bottom:1px solid black; margin:40px; }
*.alert h3 { display:inline; font-size:1.3em; text-transform:uppercase; }
*.alert p { display:inline; margin-left:10px; letter-spacing:-0.8px }
*.alert.caution { color:red;
border-top:3px double red; border-bottom:3px double red; }
*.alert *.decoration { border-left:15px solid gold;
margin-right:-11px; font-size:0.7em; vertical-align:2px; }