CSS CSS Tutorial CSS Advanced CSS Responsive Web Design(RWD) CSS Grid CSS Properties Sass Tutorial Sass Functions



background-color

The background-color property is used to set the background color of an HTML element. It is one of the most commonly used CSS properties and is used to add color to the background of an element. This property can be applied to any HTML element, including the body, div, span, and others.

The background-color property can be set using a variety of values, including color names, hexadecimal values, RGB values, and HSL values. The color values can be specified using any of these formats, and the browser will automatically convert them to the appropriate format.

Here are some examples of how to use the background-color property:

Color Names

The background-color property can be set using color names. There are 147 color names that are recognized by all modern browsers. Here are some examples:

<div style="background-color: red;">This is a red div.</div>
<div style="background-color: blue;">This is a blue div.</div>
<div style="background-color: green;">This is a green div.</div>

Hexadecimal Values

The background-color property can also be set using hexadecimal values. Hexadecimal values are six-digit codes that represent the amount of red, green, and blue in a color. Here are some examples:

<div style="background-color: #FF0000;">This is a red div.</div>
<div style="background-color: #0000FF;">This is a blue div.</div>
<div style="background-color: #00FF00;">This is a green div.</div>

RGB Values

The background-color property can also be set using RGB values. RGB values are three numbers that represent the amount of red, green, and blue in a color. Here are some examples:

<div style="background-color: rgb(255, 0, 0);">This is a red div.</div>
<div style="background-color: rgb(0, 0, 255);">This is a blue div.</div>
<div style="background-color: rgb(0, 255, 0);">This is a green div.</div>

HSL Values

The background-color property can also be set using HSL values. HSL values are three numbers that represent the hue, saturation, and lightness of a color. Here are some examples:

<div style="background-color: hsl(0, 100%, 50%);">This is a red div.</div>
<div style="background-color: hsl(240, 100%, 50%);">This is a blue div.</div>
<div style="background-color: hsl(120, 100%, 50%);">This is a green div.</div>

The background-color property can also be set using RGBA and HSLA values, which include an alpha channel to specify the opacity of the color.

Overall, the background-color property is a powerful tool for adding color to HTML elements. It can be used in a variety of ways to create visually appealing designs.

References

Activity