Skip to content
Related Articles

Related Articles

How to set the background-color of different elements in CSS?
  • Last Updated : 31 Mar, 2021

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;

Below examples illustrates the approach.

Example 1:



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:

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:

My Personal Notes arrow_drop_up
Recommended Articles
Page :