Skip to content
Related Articles

Related Articles

Improve Article

How to set Background Color in HTML ?

  • Difficulty Level : Basic
  • Last Updated : 01 Apr, 2021

In this article, we will see how to set the background color of an element. The purpose of using style attribute is to add styles to the elements. Using style attribute with different elements results in change in that element only. This attribute can be used as inline, internal or external. The style attribute provides number of properties which can be used to improve a simple html page.

The background color can be changed in three ways:

  • Inline style attribute
  • Internal CSS
  • External CSS

The HTML5 doesn’t support the ‘bgcolor’ attribute of <body> tag, therefore we need to use the inline style attribute and internal CSS options for changing the color of a web page. For internal CSS add <style> tag at beginning of html file and add the tag to which the changes are being applied in this case the <body> tag is used.

Syntax:

/* For inline style attribute */
<tag style="property:value">

/* For internal CSS attribute */
<style>
  tagName{
    property:value;
  }
</style>

Example 1: Below is the example that illustrates the use of inline CSS.



HTML




<!DOCTYPE html>
<html>
  
<!--This line changes the color of background-->
<body style="background-color:pink">
    <h1 style="color:green;text-align:center;">
        GeeksForGeeks
    </h1>
  
    <h3 style="text-align:center;">
        How to change color of Background?
    </h3>
</body>
  
</html>

Output: This will be displayed when html file is opened in browser.

Example 2: Below is the example that illustrates the use of internal CSS.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        body {
            background-color: powderblue;
        }
  
        h1 {
            color: green;
            text-align: center;
        }
  
        h3 {
            text-align: center;
        }
    </style>
</head>
  
<body>
    <h1>GeeksForGeeks</h1>
  
    <h3>
        How to change color of
        Background?(Using Internal CSS)
    </h3>
</body>
  
</html>

Output:This will be displayed when html file is opened in browser

External CSS: In external CSS, we create a separate file which has all the style data for the html file. Storing the file externally makes it easier to apply changes to the HTML page.

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :