How to Change Background Color in HTML without CSS ?
Last Updated :
26 Jun, 2024
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. This article will cover various methods to change the background color of an element.
1. Using bgColor Attribute
The bgcolor attribute can change the background color of an element. This approach involves directly adding the bgcolor attribute to the HTML element and specifying 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>GeeksforGeeks</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.
2. Using Inline Styling
You can change the background color of an element using inline styling by adding the style attribute to the HTML element and specifying the background-color 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>GeeksforGeeks</h1>
<h3>Using Inline Styling for Background change</h3>
</body>
</html>
Output:
3. 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>
</head>
<body onload="changeBackgroundColor()">
<h1>GeeksforGeeks</h1>
<h3>Using Javascript approach for Background change</h3>
<script>
function changeBackgroundColor() {
document.body.style.backgroundColor = "green";
}
</script>
</body>
</html>
Output:
While the bgcolor attribute can change the background color of an element, it is deprecated in HTML5. It is recommended to use CSS for styling, which provides more flexibility and control. Inline styling, and JavaScript are effective methods for changing the background color of HTML elements.