Mostrar alertas con CSS

Mostrar alertas de una forma elegante mediante CSS es posible y el siguiente código muestra un ejemplo de ello. El código es fácil de interpretar y los divs se ajustan al contenido.

El código CSS necesario para mostrar las alertas de un forma bastante elegante podría ser el siguiente:

.info, .correcto, .ojo, .error, .validation {
    border: 1px solid;
    margin: 10px 0px;
    padding:15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    text-align:left;
    width:auto;
}
.info {
    color: #00529B;
    background-color: #BDE5F8;
    background-image: url('imagenes/info.jpg');
}
.correcto {
    color: #4F8A10;
    background-color: #DFF2BF;
    background-image:url('imagenes/correcto.JPG');
}
.ojo {
    color: #9F6000;
    background-color: #FEEFB3;
    background-image: url('imagenes/ojo.JPG');
}
.error {
    color: #D8000C;
    background-color: #FFBABA;
    background-image: url('imagenes/error.jpg');
}

Y en el html utilizar div’s de la siguiente forma:

<div class="info"><b>Mensaje de información.</b></div>
<div class="correcto"><b>Mensaje de Ok.</b></div>

<div class="error"><b>Mensaje de error.</b></div>
<div class="ojo"><b>Mensaje de precaución.</b></div>

Ver ejemplo