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

Download File

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 basic of css.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>