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.
To modify the background color of a webpage using the bgcolor attribute, the following steps should be adhered to. By following these instructions, adjusting the background color can be accomplished effortlessly:
Step 1: To begin, it is necessary to input the Html code into a text editor or access the current Html file in the text editor where we intend to apply the bgcolor attribute to alter the background color of the Html page.
<!Doctype Html>
<Html>
<Head>
<Title>
Change the background color using Bgcolor attribute
</Title>
</Head>
<Body>
C# Tutorial <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: Position the cursor inside the opening <body> tag in our HTML file. Next, enter the bgcolor attribute exactly as demonstrated in the block below:
<Body bgcolor=" ">
Step 3: Next, we need to specify the color we wish to apply to the background of the webpage. Enter the desired color name within the bgcolor attribute, as detailed in the following code block.
<!Doctype Html>
<Html>
<Head>
<Title>
Change the background color using Bgcolor attribute
</Title>
</Head>
<Body bgcolor="blue">
C# Tutorial <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 4 involves saving the HTML code in a text editor and then running the code. Upon execution, the web page's background will display in the color specified in the document. Below is a screenshot illustrating the output of the HTML code mentioned above:
2. Using an Inline Style attribute
To modify the background color of a webpage through an inline style attribute, we need to adhere to the following guidelines. By following these steps, adjusting the background color can be accomplished effortlessly.
To begin, the initial step involves entering the HTML code into a text editor or accessing an already existing HTML file within the text editor where we intend to apply the Inline style attribute to alter the background color of the 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: Next, position the cursor inside the initial <body> tag in our HTML file. Subsequently, enter the style attribute exactly as demonstrated in the subsequent code block:
<body style="background-color:">
Step 3: Next, we need to specify the color we wish to apply to the background of the webpage. Enter the desired color's name within the background-color property of the style attribute, as indicated in the example below.
<!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>
In the fourth step, it is essential to save the HTML code in the text editor and proceed to run the code. Upon execution, the webpage's background will display the color specified in the document. The output of the HTML code can be observed in the screenshot below:
3. Using an Internal CSS
To modify the background color of a webpage using an internal cascading style sheet, we need to adhere to the following instructions. By following these guidelines, adjusting the background color can be accomplished effortlessly.
To begin, the initial step involves entering the HTML code into a text editor or accessing an already existing HTML file in the text editor of choice to implement internal CSS for altering the background color of the 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: Next, the cursor needs to be positioned within the head tag of the HTML document. Subsequently, the styles should be specified within the <style> tag as illustrated in the code block below. Following that, the background-color attribute should be added to 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>
Finally, the next step involves saving the HTML code in the text editor and then executing it. Upon running the code, the webpage's background will display in the color specified within the document. Refer to the screenshot below for the output of the aforementioned HTML code: