How to Change Background Color in HTML without CSS ?
Last Updated :
05 Mar, 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.
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>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.
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>GeeksforGeeks</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>GeeksforGeeks</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>GeeksforGeeks</h1>
<h3>Using Internal CSS for Background change</h3>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...