Add CSS Colored Content Boxes to website or blog posts

Content highlighting is one of the basic things you do while formatting your posts. Basic highlighting can be achieved using the <b> and <i> HTML tags. But how about colored boxes?

For example; if you want to attract the reader to a particular section, you have to highlight the whole block. Here comes the use of colored content boxes. In this tutorial, we’ll see how to add colored boxes in our content to highlight things effectively.

CSS Colored Boxes: Examples

Following are the content boxes with 6 different colors:

The blue-colored content box (Box color: #d8ecf7).

The red-colored content box (Box color: #e2e2e2).

The green-colored content box (Box color: #d9edc2).

The purple-colored content box (Box color: #e2e2f9).

The red-colored content box (Box color: #f9dbdb).

The yellowcolored content box (Box color: #fef5c4).

Adding the colored boxes to your site or blog

We are going to add the colored boxes with the help of CSS. Add the following CSS code at the end of your CSS file and save changes.

.content-box-blue,
.content-box-gray,
.content-box-green,
.content-box-purple,
.content-box-red,
.content-box-yellow {
    margin: 0 0 25px;
    padding: 20px;
}
 
.content-box-blue {
    background-color: #d8ecf7;
    border: 1px solid #afcde3;
}
 
.content-box-gray {
    background-color: #e2e2e2;
    border: 1px solid #bdbdbd;
}
 
.content-box-green {
    background-color: #d9edc2;
    border: 1px solid #b2ce96;
}
 
.content-box-purple {
    background-color: #e2e2f9;
    border: 1px solid #bebde9;
}
 
.content-box-red {
    background-color: #f9dbdb;
    border: 1px solid #e9b3b3;
}
 
.content-box-yellow {
    background-color: #fef5c4;
    border: 1px solid #fadf98;
}

The above CSS allows you to add content boxes with 6 different colors: blue, gray, green, purple, red and yellow.

Adding these boxes to your content is very simple. Just follow the markup pattern given in the below table to implement the content boxes.

<div class="content-box-blue">You text goes here</div>

<div class="content-box-gray">You text goes here</div>

<div class="content-box-green">You text goes here</div>

<div class="content-box-purple">You text goes here</div>

<div class="content-box-red">You text goes here</div>

<div class="content-box-yellow">You text goes here</div>

Easy! Enjoy :)