Posted on August 19, 2008 - by Impress Lab

Creating CSS Alert Boxes

A quick and useful way of beautifying your content are alert boxes, which are becoming more and more common on the web. Alert boxes quickly highlight important information, such as warnings or tips, separating them from your main body content.

Purpose of Alert Boxes

Considering that the average website visitor only spends perhaps a minute on each page, alert boxes can quickly grab the reader’s attention to the most important information. In addition, alert boxes help break the flow of several paragraphs of text with a splash of color and cute icons in our examples below.

Creating CSS Alert Boxes

Creating alert boxes are perhaps one of the easiest CSS tricks:

1. CSS Code

You can create seperate paragraph classes in your stylesheet. For example, to create a red message box (perhaps for warnings), use the following code:

Notice that the alert box includes a background image (”images/red.gif”). This will create the icon on the left side. For most cases, we suggest you use FAMFAMFAM’s free Silk Icon set. The icon should be only 16px by 16px as not to distract from the actual text.

You can also create alert boxes with border widths of 2px. Depending on the size of the text, you can go even larger. For general body text such as this, a 1px border is usually best.

2. HTML Code

To display an alert in your web page, use the following code:

This code will create this alert box when viewed:

Of course, replace the red class with the class used in your CSS file. You can also create other combinations with different icons and background/border color schemes. See the next section for other types of common alert boxes.

Types of Alert Boxes

There are several types of alert boxes you may want to create and use throughout your site. In each case, notice that: 1.) the background should be a light, pastel color, 2.) the border color should be darker than the background color, and 3.) the font color must be readable on the background color. The most obvious are red warning boxes, which may use the following color scheme:

Background color: #FB7070  (light red)
Border color: #D43C3C (dark red)
Font color: #FFFFFF (white)

You can also use yellow boxes for general tips or highlights:

Background color: #FFFFCC (light yellow)
Border color: #DDDB54 (dark yellow)
Font color: #000000 (black)

You can also use green boxes for troubleshooting messages:

Background color: #9BCF7B (light green)
Border color: #669933 (dark green)
Font color: #000000 (black)

Actual Examples

Alert Box Suggestions

Alert boxes work best on tutorial pages or for instructions as they provide quick information with attention to the most important details.

With anything in design, use alert boxes in moderation. If you see your entire page colored in red or yellow, you may be using this handy CSS technique a bit too much.

Finally, we recommend that you use colors for the CSS classes (i.e. red, yellow, and green) because it will be much easier to remember them when using the classes in your web pages. For example, consider that you used “.warning” as your CSS class for the red alert boxes. You would have to remember that you used this class name when creating the code in your pages. The color name may be easier to remember. However, you can use classes like “.warning” if you have several red-colored boxes, but with different icons.