How to change background color in CSS?

The background-color property in CSS is used to set the background color of an element. It applies solid colors as the element's background. The background of an element covers the total size, including the padding and border, but excluding margin. It can be applied to all HTML elements.

Syntax

element {  
    background-color: color_name | transparent | initial | inherit;  
}  

The color_name value of this property defines the value of background color or specifies the color codes. It can be given by using the color name, rgb() value, or the hexadecimal value.

The transparent value of this property is the default value, which specifies the transparent background color.

Example

In this example, we are defining the value of the background-color property by using the color name, hexadecimal value, rgb() value, and the hsl() value. There are four div elements on which we apply the background-color property.

<!DOCTYPE html>
<html>
<head>
<title>background-color property</title>
<style>
body {
text-align:center;
}
h1{
color: blue;
}
div{
font-size: 25px;
padding: 50px;
border: 5px solid red;
margin: 20px;
}
#one{
background-color: lightgreen;
}
#two{
background-color: #ddaefa;
}
#three{
background-color: rgb(155, 55, 128);
color: white;
}
#four{
background-color: hsl(60, 22%, 50%);
color: white;
}
</style>
</head>
<body>
<h1>Welcome to the javaTpoint.com</h1>
<div id = "one">
background-color: lightgreen;
</div>
<div id = "two">
background-color: #ddaefa;
</div>
<div id = "three">
background-color: rgb(155, 55, 128);
</div>
<div id = "four">
background-color: hsl(60, 22%, 50%);
</div>
</body>
</html>

Test it Now

Output