How to Change Background Color in HTML without CSS ?
In HTML, you can change the background color of an element using the bgcolor
attribute. However, it’s important to note that the bgcolor
attribute is deprecated in HTML5 and should be avoided in favor of using CSS for styling.
Table of Content
- Using bgColor Attribute
- Using Inline Styling
- Using JavaScript
- Using Internal CSS
Using bgColor Attribute
In HTML, you can change the background color of an element using the bgcolor
attribute. This approach involves directly adding the bgcolor
attribute to the HTML element and specify the desired background color.
Syntax:
<tagname bgcolor="color">
Example: Implementation to change the background colour.
HTML
<!DOCTYPE html> < html > < head > < title >Using bgcolor attribute</ title > </ head > < body bgcolor = "grey" > < h1 >w3wiki</ h1 > < h3 > Using bgColor attribute for Background change </ h3 > </ body > </ html > |
Output:
Note: Only one approach is possible for changing the background color of HTML without using CSS. However we can change the background color of HTML using below approaches also.
Using Inline Styling
In HTML, you can change the background color of an element using inline styling. This approach involves directly adding the `style` attribute to the HTML element and specifying the desired background colour using the ‘background-colour’ property.
Syntax:
<p style="background-color: yellow;">This is a paragraph</p>
Example: Implementation to change the background colour.
HTML
<!DOCTYPE html> < html > < head > < title >Inline Styles</ title > </ head > < body style = "background-color: green;" > < h1 >w3wiki</ h1 > < h3 >Using Inline Styling for Background change</ h3 > </ body > </ html > |
Output:
Using JavaScript
In JavaScript, you can change the background color of an element by accessing its style
property and setting the backgroundColor
property to the desired color value.
Syntax:
document.getElementById("myParagraph").style.backgroundColor = "yellow";
Example: Implementation to change the background colour.
HTML
<!DOCTYPE html> < html > < head > < title >Using JavaScript approach</ title > < script > function changeBackgroundColor() { document.body.style.backgroundColor = "green"; } </ script > </ head > < body onload = "changeBackgroundColor()" > < h1 >w3wiki</ h1 > < h3 >Using Javascript approach for Background change</ h3 > </ body > </ html > |
Output:
Using Internal CSS
This approach involves defining the style within the <style>
tag in the HTML document. For example, to set the background color of a paragraph to yellow using internal CSS, you would use the following syntax.
Syntax:
<style>
element {
background-color: yellow;
}
</style>
Example: Implementation to change the background colour.
HTML
<!DOCTYPE html> < html > < head > < title >Using Internal CSS</ title > < style > body{ background-color: green; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h3 >Using Internal CSS for Background change</ h3 > </ body > </ html > |
Output:
Contact Us