How to change Background Color in HTML ?

The background color in HTML refers to the color displayed behind the content of the webpage.to change it, CSS is used, with various approaches available to change the background color. in which we define the background color property within a CSS rule, specifying a color value such as a name, hexadecimal code, RGB, or HSL value. Apply this rule to the desired HTML element.

There are three methods to change the background color of a document:

Table of Content

Changing Background Color using bgcolor attribute
Changing Background Color using an Inline CSS
Changing Background Color using Internal CSS
Changing Background Color using External CSS

Changing Background Color using bgcolor attribute

In this approach we are using the bgcolor attribute directly in HTML elements allows for quick background color changes. The bgcolor attribute is deprecated in HTML5 but is still supported for compatibility. It sets the background color of an element

Changing Background Color using bgcolor attribute Syntax:

bgcolor="color_name"

Changing Background Color using bgcolor attribute Example:

Here, we sets the background color of the body to light green using the bgcolor attribute.

HTML

<html> 

    <head> 

        <title>Background Change using bgcolor attribute Example</title> 

    </head> 

    <body bgcolor="lightgreen"> 

        <h1> 

            Hello reader my name is sachin 

            Welcome to GeekforGeeks 

        </h1> 

    </body> 

    </html>

Output:

Changing Background Color using bgcolor attribute Example Explanation:

The HTML file defines the structure of the webpage.
Set to light green using the bgcolor attribute within the <body> tag.

Changing Background Color using Inline CSS

Here we are using inline CSS to change the background color of an HTML element. This is achieved by applying the style attribute directly within the HTML tag, specifying the background-color property.

Changing Background Color using Inline CSS Syntax:

< tag style="background-color: colorname;">..</tag>

Changing Background Color using Inline CSS 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

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

Changing Background Color using Inline CSS Example Explanation:

Here we are creating a Basic HTML document with <html>, <head>, <title>, <body>, and <h1>, <h2> elements.
In Background color “greenyellow” applied directly to the <body> tag using the style attribute.

Changing Background Color using Internal CSS

Here, we are using Internal CSS,in which we used within the <style> tags in the <head> section of an HTML document to apply styling rules, such as setting the background color, to specific elements.

Background Change using Internal CSS Syntax:

<style>
    Body {
        background-color: greenyellow;
    }
</style>

Changing Background Color using Internal CSS Example:

Here, the background color is set to greenyellow using internal CSS within the <style> tags in the <head> section.

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:

Changing Background Color using Internal CSS Explanation:

Here we are creating basic HTML document with <html>, <head>, <title>, <style>, and <body> tags.
Styling applied within the <style> tag targeting the <body> element for background color.

Changing Background Color using External CSS

Here , we are using External CSS.In which we define style rules in a separate CSS file and linking it to an HTML document using the <link> tag. This file contains all the styling information, including background color settings.

Changing Background Color External CSS Syntax:

body{
    background-color: greenyellow;
};

Changing Background Color using External CSS 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.

CSS

body{ 

    background-color: greenyellow; 

    }

HTML

<html lang="en"> 

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

Output:

Changing Background Color using External CSS Example Explanation:

Here we have a document structure with <html>, <head>, <title>, <link>, and <body> tags.
External CSS Link Connects the HTML file to an external stylesheet named “style.css” for additional styling.
By using this external stye sheet we target our body elemnt background color.

Article Tags :

HTML

Web Technologies

HTML-Questions