CSS Properties: How to set the background-color of different elements?

Last update on February 16 2024 13:18:55 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<meta type="utf-8" /><!-- Specify the character encoding of the HTML document -->
<title>How to set the background-color of different elements</title><!-- Set the title of the HTML document -->
<style type="text/css">/* CSS style start*/
body {
    background-color: #00CCFF; /* Set background color for the body */
}

h1 {
    background-color: #bbff00; /* Set background color for the h1 element */
}

p {
    background-color: rgb(255,0,255); /* Set background color for the p element using RGB color notation */
}
</style>
</head>
<body>
<h1>This is heading 1</h1><!-- Display a heading with background color -->
<p>This is a paragraph.</p><!-- Display a paragraph with background color -->
</body>
</html>

Explanation:

The HTML document sets the background color for the entire body, <h1> heading, and <p> paragraph elements.
Each CSS rule targets a specific element (body, h1, p) and sets the background-color property to a specific color.
The colors are specified using hexadecimal notation (#00CCFF, #bbff00) and RGB notation (rgb(255,0,255)).
As a result, the background color of the body, heading, and paragraph will be different as defined in the CSS.

Live Demo:

See the Pen background-color-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	No

Go to Exercise page