In HTML, we can change the color of the background of a webpage using the following different ways:
- Using bgcolor attribute
- Using an Inline style attribute
- 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.
<!Doctype Html>
<Html>
<Head>
<Title>
Change the background color using Bgcolor attribute
</Title>
</Head>
<Body>
JavaTpoint <br>
Html Tutorial <br>
In HTML, we can change the color of the background of a webpage using the following different ways: <br>
1. Using bgcolor attribute <br>
2. Using an Inline style attribute <br>
3. Using internal CSS
</Body>
</Html>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:
<Body bgcolor=" "> 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.
<Body bgcolor=" "> 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:
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.
<!Doctype Html>
<Html>
<Head>
<Title>
Change the background color using Inline style attribute
</Title>
</Head>
<Body>
This page helps you to understand how to change the backround color of a web page. <br>
<br>
And, this section helps you to understand how to change the backround color of an Html page using the style attribute.
</Body>
</Html>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:
<body style="background-color:"> 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.
<!Doctype Html>
<Html>
<Head>
<Title>
Change the background color using Inline style attribute
</Title>
</Head>
<Body style="background-color:orange">
This page helps you to understand how to change the backround color of a web page. <br>
<br>
And, this section helps you to understand how to change the backround color of an Html page using the style attribute.
</Body>
</Html>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:
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.
<!Doctype Html>
<Html>
<Head>
<Title>
Change the background color using Internal Cascading StyleSheet
</Title>
</Head>
<Body>
This page helps you to understand how to change the backround color of a web page. <br>
<br>
And, this section helps you to understand how to change the backround color of an Html page using the Internal Cascading Stylesheet.
</Body>
</Html>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.
<!Doctype Html>
<Html>
<Head>
<Title>
Change the background color using Internal Cascading StyleSheet
</Title>
<style>
Body
{
background-color:green;
}
</style>
</Head>
<Body>
This page helps you to understand how to change the backround color of a web page. <br>
<br>
And, this section helps you to understand how to change the backround color of an Html page using the Internal Cascading Stylesheet.
</Body>
</Html>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:
Leave a Reply