Background color of the HTML document/element enhances the aesthetics of the webpage. Changing the background color of an HTML web page enables you to create unique colored layouts. Adding background color to HTML makes it most stand out and makes it more readable to readers.

HTML provides extensive support to manipulate the elements. HTML provides the support to change the background color as per the requirement.

This article aims to serve various methods to change the background color in HTML. You will get the following learning outcomes:

  1. How to change the background color in HTML using inline CSS
  2. How to change the background color in HTML using the Internal CSS
  3. How to change the background color in HTML using the external CSS

How to change Background color in HTML

The “background-color” property in HTML will change the background color. The earlier versions supported the “bgcolor” property which is no longer supported by the latest version. The “background-color” property can be exercised via the following means:

  • Inline CSS: The CSS styles are added inside the tag
  • Internal CSS: The styles are added in the head section inside the HTML document
  • External CSS: An external CSS file is created and linked with the HTML document to append the changes

All these methods are discussed in the upcoming sections.

How to change the background color in HTML using inline CSS

Inline CSS is used inside the element’s opening tag of the element, Inline CSS will affect only the element in which it is being used.  We will use the Background-color attribute to change the color attribute

Code:

1

2

3

<body style=“background-color: azure;”>


    <p>We used the Background-color attribute to change the background color</p>

</body>

Here we used inline CSS in the body tag, to Background color

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/06/echo/image2-24.png" data-lazy- height="420" src="data:image/svg xml,” width=”1153″>

We have used the style attribute inside the body tag and added the Background-color property and assigned the Azure color keyword name to it.

Output:

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/06/echo/image4-18.png" data-lazy- height="301" src="data:image/svg xml,” width=”1000″>

Background color of the body tag is changed to azure after applying Inline CSS.

How to change the background color in HTML using internal CSS

Internal CSS is used to style a single HTML document inside the Head section. All the CSS code will be inside the Style tag and style tag will be inside the head tag.

Code:

1

2

3

4

5

6

7

<head>


    <style>


        body {


            background-color: azure;


        }


    </style>


</head>

We used Inline CSS and selected the body section to apply the “background-color” property.

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/06/echo/image3-22.png" data-lazy- height="581" src="data:image/svg xml,” width=”1146″>

Output:

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/06/echo/image6-13.png" data-lazy- height="292" src="data:image/svg xml,” width=”1106″>

As you can see, the background color changed to Azure using Inline CSS.

How to change the background color in HTML using external CSS

External CSS is a separate file which contains only CSS code. It is linked inside the head section of an HTML file using tag, it can be used to make changes to multiple web pages. External CSS files must be saved with .CSS extension.

CSS Code:

1

2

3

body {


    background-color: #F0FFFF;

}

A CSS file is created named “style.css” and the above mentioned code is written inside “style.css”.

HTML Code:

1

2

3

<head>


    <link rel=“stylesheet” href=“style.css”>


</head>

Moreover, the following lines are used to link the CSS file in an HTML document.

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/06/echo/image5-18.png" data-lazy- height="600" src="data:image/svg xml,” width=”1069″>

tag is used to link the CSS file in the head section.

Output:

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/06/echo/image1-27.png" data-lazy- height="274" src="data:image/svg xml,” width=”1052″>

It is observed that the background color is changed from default to azure.

Conclusion

The background-color attribute will change the background color in HTML. The attribute background-color will be applied using all the styling methods which are inline, internal and external CSS. The “color name”, the “Hexa” value of color, or the “RGB” combination of the “background-color” property can be used to apply a variety of colors.

Show Comments