CSS styled error and success message

While programming webpage sometimes we need to show the error or success message. Instead of showing in a simple text which will not get concentrated by user, we can use CSS styled messages. Below I will explain how to stylize your success and error message by using CSS.

You can see the demo and download the example file below

Here is the CSS style for success message.

padding:2px 4px;
margin:0px;
border:solid 1px #C0F0B9;
background:#D5FFC6;
color:#48A41C; 
font-family:Arial, Helvetica, sans-serif; font-size:14px; 
font-weight:bold;
text-align:center;

Below is the CSS style for error message.

padding:2px 4px;
margin:0px;
border:solid 1px #FBD3C6;
background:#FDE4E1;
color:#CB4721;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
text-align:center;

After applying this style your message will look like this

Error Message goes here

Success Message goes here

Hope that this will help you. If you are beginner for CSS read this article called ..... check in the list