CSS Background-Color

By Tim-Bo Tolbert, posted on Mar 29, 2024

CSS Color Syntax

The syntax used for specifying both the color and the background-color is as follows:

color: color|transparent|initial|inherit;

background-color: color|transparent|initial|inherit;

Syntax Property Values

The following are the color syntax property values:

Value	Description
color	The value of the color to be used
transparent	Specifies that the background color should be transparent. This is on by default when no background-color value is specified.
initial	If the color value is set to initial (`color: initial;`) then that elements color value is set to be its default value.
inherit	If the color value is set to inherit (`color: inherit;`) then that elements color value is set to be whatever its parent elements color value is.

Tip

The color syntax property can be used in both the color and the background-color .

CSS background-color

The background-color property is used to specify the background color of an HTML element, including the body element of a web page.

The value of the Color specified can be any valid color name, a HEX value, an RGB value, an RGBA value, an HSL value, or an HSLA value.

The background of an element is the total size of the element, including padding and borders, but does not include the margin.

The following is an example for specifying the background color values for various element types:

CSS

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
          background-color: silver;
        }
        
        h1 {
          background-color: yellow;
        }
        
        div {
          background-color: maroon;
        }
        
        p {
          background-color: #ff0000;
        }
        
        label {
          background-color: rgb(0,255,0);
        }
    </style>
</head>
<body>
    <br/>
    <h1>Hello World</h1>
    <br/>
    <div>This text is inside a div element.
        <p>This paragraph, even though inside a div element, has its own background color.</p>
        This is more text within the div element.
    </div>
    <br/>
    <label>This text is in a label element.</label>
    <br/>
</body>
</html>

Output:

Hello World

This text is inside a div element.

This paragraph, even though inside a div element, has its own background color.

This is more text within the div element.

This text is in a label element.

Note: An elements foreground text color value does not change simply by changing that elements background color value. Therefore, depending on the colors specified for both the color and the background color, you may need to change the text color accordingly to allow it to be more readable with the desired background color.

Final Thoughts

Thank you for reading, I hope you found this blog post (tutorial) educational and helpful.

	(0)
	(0)