Error, Success, Warning, and Info Messages with CSS

These message notification boxes use font icons instead of image icons in order to increase page speed. You can also use message boxes without icons. The style of these message boxes is square, but there are style variations below. If you prefer rounded borders, see the variations, below.

This page shows you how to use message notification boxes that look like this:

This page has 3 examples for notification message boxes. Example 1 shows you how to display message boxes with icons, in which you’ll have to use the i icon element in your HTML. Example 2 uses pure CSS to display the icons. Example 3 is for message boxes without icons (simple, color-coded message boxes, no icons). For fastest page speed, use Example 3.

Example 1: Message Boxes With Icons, Using The icon HTML Element

To use message notification boxes, use this CSS:

@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

.isa_info, .isa_success, .isa_warning, .isa_error {
margin: 10px 0px;
padding:12px;

}
.isa_info {
    color: #00529B;
    background-color: #BDE5F8;
}
.isa_success {
    color: #4F8A10;
    background-color: #DFF2BF;
}
.isa_warning {
    color: #9F6000;
    background-color: #FEEFB3;
}
.isa_error {
    color: #D8000C;
    background-color: #FFD2D2;
}
.isa_info i, .isa_success i, .isa_warning i, .isa_error i {
    margin:10px 22px;
    font-size:2em;
    vertical-align:middle;
}

Please note that the CSS imports the Font Awesome stylesheet. If you already have Font Awesome included somewhere in your site, you can delete line 1 above.

The HTML To Generate The Message Boxes:

Four samples follow. In each sample, replace line 3 with your own message.

The blue info-message box:

<div class="isa_info">
    <i class="fa fa-info-circle"></i>
    Replace this text with your own text.
</div>

The green success-message box:

<div class="isa_success">
     <i class="fa fa-check"></i>
     Replace this text with your own text.
</div>

The yellow warning-message box:

<div class="isa_warning">
     <i class="fa fa-warning"></i>
     Replace this text with your own text.
</div>

The red error-message box:

<div class="isa_error">
   <i class="fa fa-times-circle"></i>
   Replace this text with your own text.
</div>

Example 2: Message Boxes With Icons, Use CSS to Generate Icons

You can generate the icons using the CSS :before pseudo element. This way, you don’t have to use the i icon HTML element as shown in Example 1. To do it this way, use this CSS instead:

@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

.my-notify-info, .my-notify-success, .my-notify-warning, .my-notify-error {
    padding:10px;
    margin:10px 0;

}
.my-notify-info:before, .my-notify-success:before, .my-notify-warning:before, .my-notify-error:before {
    font-family:FontAwesome;
    font-style:normal;
    font-weight:400;
    speak:none;
    display:inline-block;
    text-decoration:inherit;
    width:1em;
    margin-right:.2em;
    text-align:center;
    font-variant:normal;
    text-transform:none;
    line-height:1em;
    margin-left:.2em;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}
.my-notify-info:before {
    content:"f05a";
}
.my-notify-success:before {
    content:'f00c';
}
.my-notify-warning:before {
    content:'f071';
}
.my-notify-error:before {
    content:'f057';
}
.my-notify-info {
    color: #00529B;
    background-color: #BDE5F8;
}
.my-notify-success {
    color: #4F8A10;
    background-color: #DFF2BF;
}
.my-notify-warning {
    color: #9F6000;
    background-color: #FEEFB3;
}
.my-notify-error {
    color: #D8000C;
    background-color: #FFD2D2;
}

Please note that the CSS imports the Font Awesome stylesheet. If you already have Font Awesome included somewhere in your site, you can delete line 1 above.

Now, generate an info message box by using the CSS class my-notify-info. Generate a success message box by using the CSS class my-notify-success. Generate a warning message box by using the CSS class my-notify-warning. Generate an error message box by using the CSS class my-notify-error.

The following sample HTML will show all four message boxes.:

<div class="my-notify-info">This is info text</div>
<div class="my-notify-success">This is success text</div>
<div class="my-notify-warning">This is warning text</div>
<div class="my-notify-error">This is error text</div> 

You don’t have to use a div element. You can add the CSS class to any element, for example, a span element.

Example 3: Pure CSS Message Boxes With No Icons

If you prefer the message boxes without icons, use the following CSS and HTML instead. The benefit to using these message boxes without icons is that you will not load the Font Awesome stylesheet, and thus have the fastest page speed.

The CSS:

.isa_info, .isa_success, .isa_warning, .isa_error {
    margin: 10px 0px;
    padding:12px;

}
.isa_info {
    color: #00529B;
    background-color: #BDE5F8;
}
.isa_success {
    color: #4F8A10;
    background-color: #DFF2BF;
}
.isa_warning {
    color: #9F6000;
    background-color: #FEEFB3;
}
.isa_error {
    color: #D8000C;
    background-color: #FFD2D2;
}

The HTML for just the message boxes without icons:

<div class="isa_info">Replace this text with your own INFO text.</div>

<div class="isa_success">Replace this text with your own SUCCESS text.</div>

<div class="isa_warning">Replace this text with your own WARNING text.</div>

<div class="isa_error">Replace this text with your own ERROR text.</div>

Style Variations

You can use the following CSS style variations for all 3 examples above. The following CSS code lines should be inserted into the CSS code, above, for the example that you are using. If you’re using Example 1 or Example 2, above, insert this into line 6 of the CSS code above. If you’re using Example 3, above, insert this into line 4 of the CSS code.

• CSS Style Variation: Rounded Corners

  If you want your message boxes to have rounded borders, insert this:

  border-radius:.5em;
  

• CSS Style Variation: Borders

  If you want your message boxes to have line borders, whether or not they are rounded, insert this:

  border: 1px solid;
  

• CSS Style Variation: Box Shadows

  If you want your message boxes to have a bit of shadow around the box to show depth, insert this:

  box-shadow:1px 1px 3px #888;