How to Set the background-color of different Elements in CSS?

Last Updated : 15 Oct, 2024

Background colors in CSS set the color behind an element's content and padding. Use the background-color property to assign colors to elements, specifying values in hex, RGB, or color names. This allows customization of elements' backgrounds for design and readability.

Using Background Color Property

The background-color property of CSS is used to set the background of an element. We can set the applying background color by selecting the element by its class name of id name and then apply the background-color property on it to set the background color.

Syntax

background-color: color_name;

Example 1: Here each <div> has a unique background color, while a <p> element also applies a class and inline styles,

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>setting the background-color of different elements in CSS</title>
    <style>
        div {
            margin: 50px 50px;
            font-size: 50px;
        }

        .Container1 {
            background-color: green;
        }

        .Container2 {
            background-color: rgb(163, 158, 158);
            color: black;
        }

        .Container3 {
            background-color: rgb(102, 119, 102);
        }
    </style>
</head>

<body>
    <div class="Container1">
        geeksforgeeks in div1
    </div>
    <div class="Container2">
        geeksforgeeks in div2
    </div>
    <p class="Container3" 
       style="margin:50px 50px; font-size: 50px;">
        geeksforgeeks in p
    </p>
</body>

</html>

Output

Example 2: Here we setting different background colors for various elements using CSS classes. A <div>, <a>, and <p> element feature unique backgrounds,

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title> setting the background-color of different elements in CSS</title>
    <style>
        div {
            margin: 50px 50px;
            font-size: 50px;
        }

        .container1 {
            background-color: green;
        }

        .container2 {
            background-color: rgb(163, 158, 158);
            color: black;
            margin: 50px 50px;
            font-size: 30px;
        }

        .container3 {
            background-color: rgb(102, 119, 102);
        }
    </style>
</head>

<body>
    <div class="container1">
        geeksforgeeks in div
    </div>
    <a class="container2" href="https://www.geeksforgeeks.org/">
        geeksforgeeks link
    </a>
    <p class="Container3" style="margin:50px 50px; font-size: 40px;">
        geeksforgeeks in p
    </p>
</body>

</html>