Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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:

Border Colour


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!