HTML Colored Box

In this article, we will see how to create a colored box in HTML. We can not create an HTML box without the help of CSS.

Step by Step Guide to Make HTML BOX

Follow these steps to create your box easily:

We need to create a <div> tag in HTML to create a color box. If you want to put text inside that box, put it inside a <div> tag.
Then select your div in CSS and use the “background-color” property and set the color you want as bg-color as value, ex: red, pink, black, etc.
Then use the “width” property to specify the width of your box and give a value in percentage %. Because only then your box will be device friendly for all devices.
Finally use the “height” property to specify the height of your box, which you can also give a value in pixels. Then
We can also set the padding of the box using the “padding” property, If you have text inside the box you can add padding to avoid touching the edge of your text box.

Example code:

<html>
<head>
</head>
<style type="text/css">
   div{
      background-color: red;
      width: 50%;
      height: 50px;
      font-weight: bold;
      padding: 5px; }
</style>
<body>
<div>BOX 1</div>
</body>
</html>

Output: