Pro HTML5 and CSS3 Design Patterns

(avery) #1

CHAPTER 20 ■ ALERTS


Alert


HTML


<h1>Alert</h1>
<p>Text above the alert.</p>

<div class="alert tip">
<h3>Alert Heading</h3>
<p>This is the content of the alert. It contains important information
you want to point out to the reader.
</p>
</div>

<p>Text below the alert.</p>

CSS


*.alert { margin:40px;
padding-left:20px; padding-right:20px;
border-top:1px solid black; border-bottom:1px solid black;
background-color:gold; }
*.alert h3 { font-size:1.3em; }
*.alert p { letter-spacing:1.5px; line-height:1.5em; }
*.alert.tip h3 { text-transform:uppercase; }
Free download pdf