Open In App

Set Background Color using CSS

Improve
Improve
Like Article
Like
Save
Share
Report

In CSS, setting the background color involves specifying a color for the background of an element using the CSS `background-color` property. This determines the color displayed behind the content within the element on a webpage.

The background color can be changed in three ways:

1. Setting the background color using Inline CSS

Setting the background color using inline CSS involves adding the style attribute to the HTML element and specifying the background-color property with a color value, directly within the element’s opening tag.

Setting the background color using Inline CSS Syntax

<tag style = " "></tag>

Setting the background color using Inline CSS Example

Below is an example that illustrates the use of inline CSS.

HTML




<!DOCTYPE html>
<html>
 
<!--This line changes the color of background-->
 
<body style="background-color:pink">
    <h1 style="color:green;text-align:center;">
        GeeksForGeeks
    </h1>
 
    <h3 style="text-align:center;">
        How to change color of Background?
    </h3>
</body>
 
</html>


Output:

Setting the background color using Inline CSS

Explanation:

  • In this example by using Inline CSS sets the background color of the <body> element to pink using the style attribute.
  • Inline CSS also styles headings, making them green and center-aligned.
  • Renders headings with “GeeksForGeeks” and “How to change color of Background?” in the specified styles.

2. Setting the background color using Internal CSS

Setting the background color using internal CSS involves defining a style block within the HTML document’s <head> section and specifying the `background-color` property with a color value for the desired elements.

Setting the background color using Internal CSS Syntax:

<style>
/* Internal CSS starts here */
</style>

Setting the background color using Internal CSS Example:

Below is the example that illustrates the use of internal CSS.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <style>
        body {
            background-color: powderblue;
        }
 
        h1 {
            color: green;
            text-align: center;
        }
 
        h3 {
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h1>GeeksForGeeks</h1>
 
    <h3>
        How to change color of
        Background?(Using Internal CSS)
    </h3>
</body>
 
</html>


Output: This will be displayed when html file is opened in browser

Explanation:

  • In the above example Internal CSS sets the background to powder blue for the entire page.
  • <h1> text is green and center-aligned; <h3> is center-aligned.
  • Output displays “GeeksForGeeks” in <h1> and “How to change color of Background? (Using Internal CSS)” in <h3>.

3. Setting the background color using External CSS

To set the background color using external CSS, define a CSS rule for the desired element’s background color in an external CSS file, then link the CSS file to the HTML document.

Setting the background color using External CSS Syntax

body {
background-color: rgb(219, 176, 230);
}
h1 {
color: green;
text-align: center;
}
h3 {
text-align: center;
}

Setting the background color using External CSS Example:

Here is the basic implementation of Setting the background color using External CSS

HTML




<!DOCTYPE html>
<html>
 
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
 
<body>
    <h1>GeeksForGeeks</h1>
    <h3>Changing Background Color (External CSS)</h3>
</body>
 
</html>


CSS




body {
    background-color: rgb(219, 176, 230);
}
 
h1 {
    color: green;
    text-align: center;
}
 
h3 {
    text-align: center;
}


Output:

chrome-capture-2024-1-26

Setting the background color External CSS

Explanation:

  • In this example we links an external stylesheet (styles.css) using the <link> tag in the <head> section.
  • CSS in styles.css sets the background to rgb(219, 176, 230); for the entire page.
  • CSS defines styles for <h1> (green color, center-aligned) and <h3> (center-aligned).
  • Renders “GeeksForGeeks” in <h1> and “Changing Background Color (External CSS)” in <h3> with specified styles.


Last Updated : 07 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads