Open In App

How to set the background-color of different elements in CSS?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn How to set the background-color of different elements in CSS. The background-color property of CSS is used to set the background of an element.

Approach: The background-color property of CSS is used to set the background of an element. We can set 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: In this example, we are using the above-explained approach.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div {
            margin: 50px 50px;
            font-size: 50px;
        }
 
        .gfg1 {
            background-color: green;
        }
 
        .gfg2 {
            background-color: rgb(163, 158, 158);
            color: black;
        }
 
        .gfg3 {
            background-color: rgb(102, 119, 102);
        }
    </style>
</head>
 
<body>
    <div class="gfg1">
        geeksforgeeks in div1
    </div>
    <div class="gfg2">
        geeksforgeeks in div2
    </div>
    <p class="gfg3" style="margin:50px 50px; font-size: 50px;">
        geeksforgeeks in p
    </p>
</body>
</html>


Output:

Example 2: Here is another example of using the background-color property.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div {
            margin: 50px 50px;
            font-size: 50px;
        }
 
        .gfg1 {
            background-color: green;
        }
 
        .gfg2 {
            background-color: rgb(163, 158, 158);
            color: black;
            margin: 50px 50px;
            font-size: 30px;
        }
 
        .gfg3 {
            background-color: rgb(102, 119, 102);
        }
    </style>
</head>
 
<body>
    <div class="gfg1">
        geeksforgeeks in div
    </div>
    <a class="gfg2" href="https://www.geeksforgeeks.org/">
        geeksforgeeks link
    </a>
    <p class="gfg3" style="margin:50px 50px; font-size: 40px;">
        geeksforgeeks in p
    </p>
</body>
</html>


Output:



Last Updated : 06 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads