Javatpoint Logo
Javatpoint Logo

How to Change Background Color in Html

In HTML, we can change the color of the background of a webpage using the following different ways:

  1. Using bgcolor attribute
  2. Using an Inline style attribute
  3. Using internal CSS

1. Using bgcolor attribute

Note: HTML 5 does not support the bgcolor attribute of <body> tag, so we have to use the inline style attribute and internal CSS options for changing the color of a web page.

If we want to change the color of a background of a web page using bgcolor attribute, we have to follow the steps which are given below. Using these steps, we can easily change the color of a background:

Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to use the bgcolor attribute for changing the background color of that Html page.

Step 2: Now, move the cursor within the starting <body> tag in our Html document. And, then type the bgcolor attribute as shown in the following block:

Step 3: Now, we have to give the color which we want to use on the background of the webpage. So, type the name of color in the bgcolor attribute as described in the following block.

Test it Now

Step 4: And, at last, we have to save the Html code in the text editor and run the code. After execution, we will see the background of the web page in the same color which is specified in the document. The following screenshot shows the output of the above Html code:

How to Change Background Color in Html

2. Using an Inline Style attribute

If we want to change the color of a background of a web page using an inline style attribute, we have to follow the steps which are given below. Using these steps, we can easily change the color of background.

Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to use the Inline style attribute for changing the background color of that Html page.

Step 2: Now, move the cursor within the starting <body> tag in our Html document. And, then type the style attribute as shown in the following block:

Step 3: Now, we have to give the color which we want to use on the background of the webpage. So, type the name of color in the background-color property of style attribute as described in the following block.

Test it Now

Step 4: And, at last, we have to save the Html code in the text editor and run the code. After execution, we will see the background of the web page in the same color which is specified in the document. The following screenshot provides the output of the above Html code:

How to Change Background Color in Html

3. Using an Internal CSS

If we want to change the color of a background of a web page using an internal cascading stylesheet, we have to follow the steps which are given below. Using these steps, we can easily change the background color.

Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to use the internal CSS for changing the background color of that Html page.

Step 2: Now, we have to place the cursor in the head tag of the Html document and then define the styles inside the <style> tag as shown in the following block. And, then type the background-color attribute into the body element.

Test it Now

Step 4: And, at last, we have to save the Html code in the text editor and run the code. After execution, we will see the background of the web page in the same color which is specified in the document. The following screenshot shows the output of the above Html code:

How to Change Background Color in Html




Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA