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:
Table of Content
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.
<!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:
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.
<!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
<!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>
|
body { background-color: rgb(219, 176, 230);
}h1 {
color: green;
text-align: center;
}h3 {
text-align: center;
} |
Output:
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.