Chapter 12. CSS: Styling Backgrounds

Background-color

Tag:

The background-color property is used to set the background color of selected elements.

Initial value and inheritance

The initial value of the background-color property is transparent. Unlike text-related properties, the background-color property is not inherited unless you set inherit as the property value^(note1). As you see the <body> element's background color, even though you have other elements on top, you may think that other elements are inheriting their parent element's background color; however, they are not. You are seeing the <body> element's background color because other elements are transparent by default.

Note: Background-related properties do not cascade. This means that each element will follow its initial value setting if you don't add CSS properties to it.

Color property value

You can set a color or transparent for background-color. If you want to keep it transparent, you don't need to specify it as it is the default value. If you want to set a color, use a keyword (color name) or one of the color codes. As we explained in the previous chapter, there are three major color codes.

HEX
RGB
RGBA

Using color names is the easiest way for setting the color; however, in that case, color variation is limited, while HEX and RGB can represent more than 16 million colors. Using HEX or RGB depends on your preference, and you can achieve the same results with either approach. When you want to change the opacity level, you need to use RGBA.

Color theme

When you set background colors in your website or web app, you need to consider what color theme you are applying. Check the topic Color Theme to understand the basic concept.

Practice

Objective:
Set background colors using different approaches

1. Create a new HTML file for this chapter

Create a copy of the chapter11.html file and change the name to chapter12.html.
Change the <title> section to 12. CSS: Styling Backgrounds.
Also, delete the existing content of the <body> element that was created in the previous chapter.
Add the <h1> tag to show the chapter title of this page at the top of the page.
The code should look like the one below.

chapter12.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--Google Font-->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
  <!--Custom CSS-->
  <link rel="stylesheet" href="css/practice.css">
  <title>12. CSS: Styling Backgrounds</title>
</head>
<body>
  <h1>Chapter 12. CSS: Styling Backgrounds</h1>
</body>
</html>

2. Update the body section

Add the code below in the body section of the HTML file. We are adding the bg-color-box class to define the size and shape of each box.

In the code below, we are wrapping each set of colored boxes using the <div> element with the display property to structure the results. We'll explain the display property in detail later. For now, just copy and paste the code.

chapter12.html

<h2>Background Color</h2>
<!--Red Color-->
<div style="display: flex;">
  <div class="bg-color-box" style="color: white;background-color: red;">Keyword: red</div>
  <div class="bg-color-box" style="color: white;background-color: #FF0000;">HEX: #FF0000</div>
  <div class="bg-color-box" style="color: white;background-color: rgb(255,0,0);">RGB: rgb(255,0,0)</div>
  <div class="bg-color-box" style="color: white;background-color: rgba(255,0,0,0.5);">RGBA: rgba(255,0,0,0.5)</div>
</div>
<!--Green Color-->
<div style="display: flex;">
  <div class="bg-color-box" style="color: white;background-color: green;">Keyword: green</div>
  <div class="bg-color-box" style="color: white;background-color: #008000;">HEX: #008000</div>
  <div class="bg-color-box" style="color: white;background-color: rgb(0,128,0);">RGB: rgb(0,128,0)</div>
  <div class="bg-color-box" style="color: white;background-color: rgb(0,128,0,0.5);">RGBA: rgb(0,128,0,0.5)</div>
</div>
<!--Blue Color-->
<div style="display: flex;">
  <div class="bg-color-box" style="color: white;background-color: blue;">Keyword: blue</div>
  <div class="bg-color-box" style="color: white;background-color: #0000FF;">HEX: #0000FF</div>
  <div class="bg-color-box" style="color: white;background-color: rgb(0,0,255);">RGB: rgb(0,0,255)</div>
  <div class="bg-color-box" style="color: white;background-color: rgba(0,0,255,0.5);">RGBA: rgba(0,0,255,0.5)</div>
</div>
<!--Black Color-->
<div style="display: flex;">
  <div class="bg-color-box" style="color: white;background-color: black;">Keyword: black</div>
  <div class="bg-color-box" style="color: white;background-color: #000000;">HEX: #000000</div>
  <div class="bg-color-box" style="color: white;background-color: rgb(0,0,0);">RGB: rgb(0,0,0)</div>
  <div class="bg-color-box" style="color: white;background-color: rgba(0,0,0,0.5);">RGBA: rgba(0,0,0,0.5)</div>
</div>
<hr>

3. Update the CSS file

Open the practice.css file and add new code for adding styles to the bg-color-box class.
We haven't explained the border-radius properties yet. For now, just copy and paste the code into your file. From the code readability point of view, add a comment upfront.

practice.css

/* Chapter 12. CSS: Styling Backgrounds */
.bg-color-box{
  width: 200px;
  height: 100px;
  margin: 5px;
  padding: 5px;
  border-radius: 5px;
}

4. Check the result with a browser

Open chapter12.html with a browser.
You can confirm that:
- You can set the same color with different approaches (keyword, HEX, and RGB).
- You can set opacity-level using RGBA code (adding alpha value).

You can also check the sample result here (Demo Site ).

demo code

The background-color property is used to set the background color of selected elements.

Initial value and inheritance

Note: Background-related properties do not cascade. This means that each element will follow its initial value setting if you don't add CSS properties to it.

Color property value

HEX
RGB
RGBA

Color theme

When you set background colors in your website or web app, you need to consider what color theme you are applying. Check the topic Color Theme to understand the basic concept.

Practice

Objective:
Set background colors using different approaches

1. Create a new HTML file for this chapter

Create a copy of the chapter11.html file and change the name to chapter12.html.
Change the <title> section to 12. CSS: Styling Backgrounds.
Also, delete the existing content of the <body> element that was created in the previous chapter.
Add the <h1> tag to show the chapter title of this page at the top of the page.
The code should look like the one below.

chapter12.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--Google Font-->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
  <!--Custom CSS-->
  <link rel="stylesheet" href="css/practice.css">
  <title>12. CSS: Styling Backgrounds</title>
</head>
<body>
  <h1>Chapter 12. CSS: Styling Backgrounds</h1>
</body>
</html>

2. Update the body section

Add the code below in the body section of the HTML file. We are adding the bg-color-box class to define the size and shape of each box.

chapter12.html

<h2>Background Color</h2>
<!--Red Color-->
<div style="display: flex;">
  <div class="bg-color-box" style="color: white;background-color: red;">Keyword: red</div>
  <div class="bg-color-box" style="color: white;background-color: #FF0000;">HEX: #FF0000</div>
  <div class="bg-color-box" style="color: white;background-color: rgb(255,0,0);">RGB: rgb(255,0,0)</div>
  <div class="bg-color-box" style="color: white;background-color: rgba(255,0,0,0.5);">RGBA: rgba(255,0,0,0.5)</div>
</div>
<!--Green Color-->
<div style="display: flex;">
  <div class="bg-color-box" style="color: white;background-color: green;">Keyword: green</div>
  <div class="bg-color-box" style="color: white;background-color: #008000;">HEX: #008000</div>
  <div class="bg-color-box" style="color: white;background-color: rgb(0,128,0);">RGB: rgb(0,128,0)</div>
  <div class="bg-color-box" style="color: white;background-color: rgb(0,128,0,0.5);">RGBA: rgb(0,128,0,0.5)</div>
</div>
<!--Blue Color-->
<div style="display: flex;">
  <div class="bg-color-box" style="color: white;background-color: blue;">Keyword: blue</div>
  <div class="bg-color-box" style="color: white;background-color: #0000FF;">HEX: #0000FF</div>
  <div class="bg-color-box" style="color: white;background-color: rgb(0,0,255);">RGB: rgb(0,0,255)</div>
  <div class="bg-color-box" style="color: white;background-color: rgba(0,0,255,0.5);">RGBA: rgba(0,0,255,0.5)</div>
</div>
<!--Black Color-->
<div style="display: flex;">
  <div class="bg-color-box" style="color: white;background-color: black;">Keyword: black</div>
  <div class="bg-color-box" style="color: white;background-color: #000000;">HEX: #000000</div>
  <div class="bg-color-box" style="color: white;background-color: rgb(0,0,0);">RGB: rgb(0,0,0)</div>
  <div class="bg-color-box" style="color: white;background-color: rgba(0,0,0,0.5);">RGBA: rgba(0,0,0,0.5)</div>
</div>
<hr>

3. Update the CSS file

practice.css

/* Chapter 12. CSS: Styling Backgrounds */
.bg-color-box{
  width: 200px;
  height: 100px;
  margin: 5px;
  padding: 5px;
  border-radius: 5px;
}

4. Check the result with a browser

Open chapter12.html with a browser.
You can confirm that:
- You can set the same color with different approaches (keyword, HEX, and RGB).
- You can set opacity-level using RGBA code (adding alpha value).

You can also check the sample result here (Demo Site ).

demo code

Tag:

Back to the course page