CSS Notification Boxes

Introduction:

Here I will explain CSS Notification Boxes.

HTML:

    

error: Write your error message here.

success: Write your success message here.

warning: Write your warning message here.

notice: Write your notice message here.

CSS:

    .alert-box {
        color:#555;
        border-radius:10px;
        font-family:Tahoma,Geneva,Arial,sans-serif;font-size:11px;
        padding:10px 10px 10px 36px;
        margin:10px;
    }
    .alert-box span {
        font-weight:bold;
        text-transform:uppercase;
    }
    .error {
        background:#ffecec url('images/error.png') no-repeat 10px 50%;
        border:1px solid #f5aca6;
    }
    .success {
        background:#e9ffd9 url('images/success.png') no-repeat 10px 50%;
        border:1px solid #a6ca8a;
    }
    .warning {
        background:#fff8c4 url('images/warning.png') no-repeat 10px 50%;
        border:1px solid #f2c779;
    }
    .notice {
        background:#e3f7fc url('images/notice.png') no-repeat 10px 50%;
        border:1px solid #8ed9f6;
    }

Demo:

error: Write your error message here.

success: Write your success message here.

warning: Write your warning message here.

notice: Write your notice message here.