Error and success CSS message boxes 001

I will give you some special and simple css message box for error, success, info and warning for web application, I will make a class for each one by choosing a suitable border and font colors for example red color indicate for error and for the process that can't complete while green color indicate for complete and successful process.

let us start with a simple CSS message box which used in a specific position beside the process place for example you want to check the validation of date and appear the error message if it failed, or for check availability for a new user name.

/***********************************************************************
http://function-code.blogspot.com/2012/12/css-message-boxes-for-different-types.html
My code is free to use, but not free to republish
************************************************************************/
 
.error_msg_001, .success_msg_001, .info_msg_001, .warning_msg_001{
 width: auto;
 height: auto;
 margin: 1px;
 padding: 2px 4px;
 text-align:center;
 font: bold 15px Arial,sans-serif;
 }
 
.error_msg_001{
 border:solid 1px #FBD3C6;
 background:#FDE4E1;
 color: #B10009;
 }
 
.success_msg_001{
 border: solid 1px #ADDE5C;
 background: #DFF2BF;
 color: #008000;
 }
 
.info_msg_001{
 border:solid 1px #46B6EC;
 background:#BDE5F8;
 color: #00529B;
 }
 
.warning_msg_001{
 border:solid 1px #FDDD5B;
 background:#FEEFB3;
 color: #9F6000;
 }

HTML code put this message in place you want, you can change the width and height of the message from css properties.

<div id="msg_1" class="error_msg_001">
 Error: This username is not available.
</div>

<div id="msg_2" class="success_msg_001">
 Your account has been created successfuly.
</div>

<div id="msg_3" class="info_msg_001">
 Important information for your account.
</div>

<div id="msg_4" class="warning_msg_001">
 Warning: please update your profile information.
</div>

Error: This username is not available.

Your account has been created successfuly.

Important information for your account.

Warning: please update your profile information.

If this post was good and helpful for you, Please give it Like.

.