CSS message box examples

Last update: •Date posted:
COMMENTS•2 Comments/in /Posted by MIKE DALISAY

Today I'm going to show you CSS message box examples. We have four types of commonly used message boxes in a software/web application, I call them Info, Success, Warning, and Error boxes.

Displaying message boxes in your site or application helps users a lot in identifying what they are doing or what is the result of their actions, clicks, or operations.

It would be great if your message boxes are clearly designed, with proper colors, message icons, and is placed on the right part of your application.

Usually, it can be seen on the top/upper part of your application just like what we have on YouTube when you try to subscribe to a channel.

At the end of this tutorial, we will have the following output: (Please Click To Enlarge)

Four Message Boxes Using CSS
Four Commonly Used Message Boxes

So, let’s go! (Please read the comments on the codes):)

Step 1: We will organize our files in this way. (but you can still do it in your own way if you want)

Organization of files
Organization of files

Step 2: Create your index.html file. You should have this code in it.

<html>
     <head>         
          <title>Four Message Boxes</title>
          <link href=‘styles/style.css’ type=‘text/css’ rel=‘stylesheet’ /> 
     </head>
<body>
     <div class=‘info’>
          This is an info box. Many people tell me I’m handsome.
     </div>
     <div class=‘success’>
          This is a success box. Thank you for telling me I’m handsome.
     </div>
     <div class=‘warning’>
          This is a warning box. You must tell me I’m handsome.
     </div>
     <div class=‘error’>
          This is an error box. You didn’t tell me I’m handsome.
     </div>
 
</body>
</html>

Step 3: Create your style.css file and the code would be:

/* this part will create the the message box*/
.info, .success, .warning, .error, .validation { 
     /* setting the box model */
     border: 1px solid;
     margin: 10px 0px; 
     padding:15px 10px 15px 50px; 
     background-repeat: no-repeat; 
     background-position: 10px center; 
     /* setting fonts */
     font-family:Arial, Helvetica, sans-serif;
     font-size:13px;
     font-weight: bold;
}
/* this part will load the info box icon and make our box color blue */
.info {     
     color: #00529B;
     background-color: #BDE5F8;
     background-image: url(‘../images/info.png’);
}
 
/* this part will load the success box icon and make our box color green */
.success {     
     color: #4F8A10; 
     background-color: #DFF2BF; 
     background-image:url(‘../images/success.png’);
}
 
/* this part will load the warning box icon and make our box something like color yellow */
.warning {
     color: #9F6000;
     background-color: #FEEFB3; 
     background-image: url(‘../images/warning.png’);
     background-position: 10px 7px; 
}
 
/* this part will load the error box icon and make our box color red */
.error {
     color: #D8000C; 
     background-color: #FFBABA; 
    background-image: url(‘../images/error.png’);
}

Step 4: If you are having problems blending the background color of your icon to the background color of your box, pipette will help you a lot. :)
*Note: You can just download or make your own icon for your message boxes :)

Thank you for reading! :)

Hi! I'm Mike Dalisay, the co-founder of codeofaninja.com, a site that helps you build web applications with PHP and JavaScript. Need support? Comment below or contact [email protected]

I'm also passionate about technology and enjoy sharing my experience and learnings online. Connect with me on LinkedIn, Twitter, Facebook, and Instagram.