Change Magento alert message styles

Magento front-end alert messages are usually not the elements you style when developing a theme. Because of that almost all Magento websites use default alert styles. Even if the theme is highly modified it is enough to look at the alerts to be able to tell that a website was built on Magento. This requires the following:
Let's change the default alert messages styles with a little help of bootstrap:
We are not going to integrate bootstrap to Magento theme, we are only replicating the styles of alert messages.

Open your stylesheet: skin/frontend/yourpackage/yourtheme/css/styles.css

Find:

/* Global Messages  */
.success { color:#3d6611; font-weight:bold; }
.error { color:#df280a; font-weight:bold; }
.notice { color:#e26703; }

.messages,
.messages ul { list-style:none !important; margin:0 !important; padding:0 !important; }
.messages { width:100%; overflow:hidden; }
.messages li { margin:0 0 10px !important; }
.messages li li { margin:0 0 3px !important; }
.error-msg,
.success-msg,
.note-msg,
.notice-msg { border-style:solid !important; border-width:1px !important; background-position:10px 9px !important; background-repeat:no-repeat !important; min-height:24px !important; padding:8px 8px 8px 32px !important; font-size:11px !important; font-weight:bold !important; }
.error-msg { border-color:#f16048; background-color:#faebe7; background-image:url(../images/i_msg-error.gif); color:#df280a; }
.success-msg { border-color:#446423; background-color:#eff5ea; background-image:url(../images/i_msg-success.gif); color:#3d6611; }
.note-msg,
.notice-msg { border-color:#fcd344; background-color:#fafaec; background-image:url(../images/i_msg-note.gif); color:#3d6611; }

Change it to:

/* Global Messages  */
.messages,
.messages ul { list-style:none !important; margin:0 !important; padding:0 !important; }
.messages { width:100%; overflow:hidden; }
.messages li { margin:0 0 10px !important; }
.messages li li { margin:0 !important; line-height:24px; }
.error-msg,
.success-msg,
.note-msg,
.notice-msg { border-style:solid !important; border-width:1px !important; background-position:10px 9px !important; background-repeat:no-repeat !important; min-height:24px !important; padding:8px 16px !important; font-size:12px !important; /*font-weight:bold !important;*/ -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
.error-msg { background-color:#F2DEDE; border-color:#EED3D7; color:#B94A48; }
.success-msg { background-color:#DFF0D8; border-color:#D6E9C6; color:#468847; }
.note-msg { background-color:#D9EDF7; border-color:#BCE8F1; color:#3A87AD; }
.notice-msg { background-color:#FCF8E3; border-color:#FBEED5; color:#C09853; }

Result:

    • Success message.
    • Error message.
    • Note message.
    • Notice message.