How to change background color in CSS

To change the background color in CSS, you can use the background-color property. This property allows you to set the background color of an HTML element.

Here’s an example of how to change the background color of an element:

HTML:

<div class="colored-box">This is a colored box.</div>

CSS:

.colored-box {
  background-color: #007bff; /* Replace with your desired color value */
  color: white; /* Optional: Set the text color to ensure readability */
  padding: 20px; /* Optional: Add padding for spacing and better visual appearance */
}

In this example, we have a <div> element with the class “colored-box.” We target this element in CSS using the class selector .colored-box and use the background-color property to change the background color.

The background-color property accepts various color values, including:

1. Named Colors: You can use named colors like “red,” “blue,” “green,” “yellow,” etc.
2. Hexadecimal Values: You can use hexadecimal color values like #007bff for a specific color.
3. RGB Values: You can use RGB color values like rgb(0, 123, 255) for more control over the color.
4. HSL Values: You can use HSL color values like hsl(207, 100%, 50%) for even more control.

Optionally, you can set the color property to change the text color within the colored background, ensuring readability and visual contrast.

By using the background-color property, you can easily change the background color of any element and create visually appealing designs for your web page.