The background color property in CSS allows you to set the color of an element’s background. It helps define the visual appearance and style of your web page. Let’s explore how to use the background-color property to set background colors.

Syntax

The background-color property is applied to an HTML element and takes a color value as its parameter. Here’s the basic syntax:

selector {
  background-color: color;
}

The selector represents the HTML element(s) you want to target, and color specifies the desired background color. The color value can be specified using color names, hexadecimal notation, RGB or RGBA notation, or HSL or HSLA notation.

Examples

Using Color Names:

ody {
  background-color: yellow;
}

button {
  background-color: aqua;
}

Using Hexadecimal Notation:

h1 {
  background-color: #336699;
}

div {
  background-color: #FFA500;
}

Using RGB Notation:

p {
  background-color: rgb(255, 0, 0);
}

span {
  background-color: rgb(0, 128, 0);
}

Using RGBA Notation:

.container {
  background-color: rgba(0, 0, 255, 0.5);
}

.header {
  background-color: rgba(255, 0, 0, 0.8);
}

Using HSL Notation:

.section {
  background-color: hsl(120, 100%, 50%);
}

.footer {
  background-color: hsl(240, 100%, 50%);
}

Conclusion

The background-color property in CSS enables you to define the background color of HTML elements.

By using color names, hexadecimal notation, RGB or RGBA notation, or HSL or HSLA notation, you can customize the background color and enhance the visual appeal of your web pages.

Experiment with different colors to achieve the desired effects and create engaging designs.