How to change background color in CSS
CSS is all about presentation. Discover how How to change background color in CSS works to transform plain HTML into a premium user experience in the guide below.
The background-color attribute in CSS is employed to define the background color of a particular element. It assigns solid colors as the background of the element. The background of an element encompasses the entire dimensions, encompassing the padding and border, but not the margin. It is applicable to all HTML elements.
Syntax
element {
background-color: color_name | transparent | initial | inherit;
}
The color_name attribute of this property specifies the background color by defining color values using color names, rgb values, or hexadecimal values.
The default setting for this property is the transparent value, indicating a background color that is see-through.
Example
In this instance, we are specifying the background-color attribute value through various methods such as color names, hexadecimal values, rgb values, and hsl values. We have four div containers where we set 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 C# Tutorial</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>
Output
