Loading

Background color

  • In CSS the background color of an HTML element is set by using background-color property.
  • Background includes the overall size of an element with padding and border but it does not include margin

Syntax:

selector {
background-color: color;
}
  • a selector is the HTML element you want to apply the background color to. (e.g., body, div, p) or a class or ID selector (e.g., .my-class, #my-id).
  • color specifies the background-color you want to use. (e.g., red, blue), hexadecimal values (e.g., #FF0000 for red), RGB values (e.g., rgb(255, 0, 0) for red), or HSL values (e.g., hsl(0, 100%, 50%) for red).

Example:

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

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

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

<body>
    <h1>Geeksforgeeks </h1>
    <h2>background-color: color_name;</h2>
</body>

</html>

Output: