CHAPTER 20 ■ ALERTSAlert
Problem You want to insert an alert into your document to point out important information to the
reader. You want to separate the alert from surrounding text to make it stand out. You want
to identify the purpose of the alert to the user and make the alert’s purpose stand out in
contrast to its content.
Solution An alert consists of a heading and content packaged inside of a division. The heading
identifies the purpose of the alert as a tip, note, caution, warning, and so forth. The content
contains the alert’s message. You can make the alert stand out by using whitespace,
borders, backgrounds, and fonts.
You can use
the type of alert. For example,
and identifies the type of alert as a tip. You can use any type of block element instead of the
division. You can use .alert to select the entire alert for styling. You can chain together
class selectors to style specific types of alerts, such as .alert.tip{}.
You can use
to identify the alert’s heading. Since alerts are not as important as a main
heading or topic headings, you may want to give them a low-level heading, such as .
The heading signals to search engines that the alert’s content is important. The heading
typically contains one word, such as “Note,” “Tip,” or “Caution.” You can use .alert h3{}
to select the heading for styling.
You can use to identify the alert’s content. You can use
.alert p{} to select the
content for styling.
The heading signals to search engines that the alert’s content is important. The heading
typically contains one word, such as “Note,” “Tip,” or “Caution.” You can use .alert h3{}
to select the heading for styling.
You can use
to identify the alert’s content. You can use
.alert p{} to select thecontent for styling.
Pattern^
HTML
ALERT HEADING
ALERT TEXT
CSS .alert { STYLES }^
.alert h3 { STYLES }
.alert p { STYLES }
.alert.TYPE { STYLES }
.alert.TYPE h3 { STYLES }
.alert.TYPE p { STYLES }
Location This pattern works anywhere you can use a block element.
Options You can use other types of block elements to mark up the alert.
Tips If you want to add even more emphasis to the alert, you can embed or
inside the paragraph or heading.
You can build prettier alerts by using rounded corners with border-radius or shadow
effects, as described in Chapter 6.
Related to All design patterns in this chapter; Terminal Block Elements, Multi-purpose Block Elements
(Chapter 2); Subclass Selector (Chapter 3); Margin, Border, Padding, Background (Chapter
6); Font (Chapter 10); Spacing, Inline Decoration (Chapter 11); Section (Chapter 13)