How to change Background Color in HTML ?
Last Updated :
14 Oct, 2024
The background color in HTML refers to the color displayed behind the content of a webpage. To change it, CSS (Cascading Style Sheets) is used, with various approaches available. In CSS, we define the background-color property within a CSS rule, specifying a color value such as a name, hexadecimal code, RGB, or HSL value, and apply this rule to the desired HTML element.
1. Using bgcolor attribute
HTML allows you to alter the background color of an element using the bgcolor attribute. However, it’s crucial to note that the bgcolor attribute is considered deprecated in HTML5, and it’s recommended to use CSS for styling purposes instead.
Syntax:
bgcolor="color_name"
Example: Here, we set the background color of the body to light green using the bgcolor attribute.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Background Change</title>
</head>
<body bgcolor="lightgreen">
<h1>
Hello reader my name is sachin
Welcome to GeekforGeeks
</h1>
</body>
</html>
Output:
2. Using Inline CSS
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 color using the background-color property.
Syntax:
< tag style="background-color: colorname;">..</tag>
Example: Here we are using Inline CSS. Inline CSS directly applies styles to individual HTML elements using the style attribute within the HTML tag
HTML
<!DOCTYPE html>
<html>
<head>
<title>Background Change using Inline CSS Example</title>
</head>
<body style="background-color: greenyellow;">
<h1>Welcome to GeeksforGeeks</h1>
<h2>We are using the Inline CSS</h2>
</body>
</html>
Output:
3. Using Internal CSS
Internal CSS is applied within the <style> tags in the <head> section of an HTML document. This method allows you to set styling rules for specific elements, such as setting the background color.
Syntax:
<style>
Body {
background-color: greenyellow;
}
</style>Example: Here, the background color is set to greenyellow using internal CSS within the <style> tags in the <head> section.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
Body {
background-color: greenyellow;
}
</style>
</head>
<body>
<h1>Welcome to GeeksforGeeks</h1>
<h2>We are using the Internal CSS</h2>
</body>
</html>
Output:
4. Using External CSS
In this method, we define style rules in a separate CSS file and link it to an HTML document using the <link> tag. This file contains all the styling information, including background color settings.
Syntax:
body{
background-color: greenyellow;
};Example: In this example we are using External CSS to creating a separate CSS file with styling rules and linking it to an HTML document using the <link> tag. This file contains the background color to target our html element.
HTML
<!DOCTYPE html>
<html>
<head>
<title>inline style attribute</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Welcome to GeeksforGeeks</h1>
<h2>We are using the External CSS</h2>
</body>
</html>
body{
background-color: greenyellow;
}
Output:
Changing the background color of an element in HTML can be achieved through various methods, with CSS being the preferred and more flexible approach. While the bgcolor attribute can be used, it is deprecated in HTML5, and it’s recommended to use CSS instead. Inline CSS, internal CSS, and external CSS offer different levels of control and maintainability, making them suitable for different use cases.