CSS background-color Property Explained with Syntax and Examples

Background color

In CSS, the background-color property is used to set the background color of an HTML element.

Key Point

background-color applies color to the element's background, including padding and border.

It does not apply to the margin.

Can be used with color names, HEX values, RGB, RGBA, HSL, or HSLA values.

Syntax:

selector {
  background-color: color;
}

selector: Specifies the HTML element or class/id (e.g., body, .box, #main) you want to style.

color: Can be:

Named color (e.g., red)

HEX (#FF0000)

RGB (rgb(255, 0, 0))

HSL (hsl(0, 100%, 50%))

Example:

<!DOCTYPE html>
<html>
<head>
    <title>background-color property</title>
    <style>
        body {
            text-align: center;
            background-color: Pink;
        }

        h1 {
            color: white;
            background-color: blue;
        }

        h2 {
            color: white;
            background-color: black;
        }
    </style>
</head>

<body>
    <h1>Mindxchange</h1>
    <h2>background-color: Color Name;</h2>
</body>
</html>

Output: