CHAPTER 20 ■ ALERTS
Inline Alert
HTML
<h1>Inline Alert</h1>
<p>An inline alert slips right into the flow of text.
As such it can be broken across lines.
<span class="alert tip">
<strong class="heading">Alert: </strong>
<em class="content">brief message. </em>
</span>
You can keep the alert's message brief and you can use
<code>white-space:nowrap</code> to prevent it from breaking across lines.
It is also important to make the line height large enough to prevent the
alert's padding and border from overlapping neighboring lines. </p>
CSS
*.alert { white-space:nowrap; line-height:2.3em;
margin:0 20px; padding:8px 20px 5px 20px;
border-top:1px solid black; border-bottom:1px solid black;
background-color:gold; }
*.alert *.heading { font-weight:bold; font-size:1.3em; }
*.alert *.content { letter-spacing:1.5px; font-style:normal; }
*.alert.tip *.heading { text-transform:uppercase; }