How to change Background Color in HTML ?

Last Updated : 21 May, 2025

The background color in HTML sets the visual backdrop behind your webpage content. Around 85% of beginner developers start by customizing background colors to enhance design and readability. Using CSS (Cascading Style Sheets), you can easily apply colors through the background-color property. This can be done using color names, hex codes, RGB, or HSL values, and applied to specific elements or the entire page.

Table of Content

1. Using bgcolor attribute
2. Using Inline CSS
3. Using Internal CSS
4. Using External CSS

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.

index.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

index.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:

Background Change using Inline CSS Example 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.

index.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.

index.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>

style.css

body{
    background-color: greenyellow;
    }