How to add a specific color to an element using CSS ?

Last Updated : 29 Sep, 2021

In this article, we will discuss elements and how to add a specific color to an element using CSS properties.

Basically, the HTML element is the collection of start and end tags with the content inserted in between them. Elements can be nested.

<tagname> Content </tagname>

Note: Please refer to the HTML Elements article for a better understanding.

Approach:

To add color to the Text, use the CSS color property.
To add color to the Box, use the CSS background-color property.
To add color to the Border, use the CSS border-color property.

Example 1: Add color to the text using the above approach.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Element Color</title> 
    <style> 
        h1 { 
            color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
</body> 
  
</html> 

In the above code, we have created an h1 tag and change the color of the text to green. To change the text color, we have used CSS color property.

Output:

Text color

Example 2: Add color to the Box.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Element Color</title> 
    <style> 
        .box-color { 
            background-color: lightgreen; 
            height: 50px; 
            width: 100px; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="box-color">GeeksforGeeks</div> 
</body> 
  
</html> 

In the above code, we have created a div tag with a class name box-color. In the style tag, we have used the CSS background-color property to change the color of the background.

The same background-color property is also used to change the background in the body tag to change the color of the entire webpage.

Output:

Box color

Note: The dimensions of the layout is totally depending on the user.

Example 3: Add color to the Border.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Element Color</title> 
    <style> 
        .border { 
            border-color: green; 
            border-style: solid; 
            height: 50px; 
            width: 100px; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="border">GeeksforGeeks</div> 
</body> 
  
</html> 

In the above code, we have created a div tag with a class name border. In the style tag, we have used the CSS border-color property to change the color and border-style property to make it visible.

Output: