How To Change Background Color With CSS

It’s possible to change background color with CSS to any color you want your container background to be. There is more than one way to apply the background color change.
There is 2 CSS codes which can be used:

How to set the background color of container inline with In HTML With CSS

First, make a box or use one there is already there.
I will use both kind of codes in the Example:

<div style="width:33%;height:100px;background-color:red;"> </div>
<div style="width:33%;height:100px;background-color:blue;"> </div>
<div style="width:33%;height:100px;background:green;"> </div>

How to set the background with hex color code

Hex color code allows for more specific color variation.

<div style="width:33%;height:100px;background-color:#a061d8;"> </div>
<div style="width:33%;height:100px;background-color:#1c7db7;"> </div>
<div style="width:33%;height:100px;background:#e9184c;"> </div>

How to set the background with RGBA color code

RGBA color code allows for more specific color variation, and to set transparency which is the last number in the RGBA code.

<div style="width:33%;height:100px;background-color:rgba(12,113,195,0.1);"> </div>
<div style="width:33%;height:100px;background-color:rgba(124,218,36,0.78);"> </div>
<div style="width:33%;height:100px;background:rgba(142,111,131,0.35);"> </div>

Change Background Color With CSS Based On ID or Class

You can either put this in a style tag or assign it in a CSS file and link it to the HTML file. If it’s for a website built in a CMS, then there properly is a place where you can write in custom CSS.
For this demonstration, I am using the style tag for the CSS.
You need to assign the HTML elements classes or ID if they do not already have that.
ID = #
Classes = .

<div class="box redbox"> </div>
<div class="box bluebox"> </div>
<div class="box" id="greenbox"> </div>

Related Guides