CSS Background Color

The background-color property in CSS is used to specify the background color of an element. You can set the background color using color names, hexadecimal values, RGB, RGBA, HSL, and HSLA values.

Setting Background Color

Here are some examples of how to set the background color using different color values:

Using Color Names

div {
    background-color: lightblue;
}

Using Hexadecimal Values

div {
    background-color: #00FF00; /* green */
}

Using RGB Values

div {
    background-color: rgb(255, 0, 0); /* red */
}

Using RGBA Values

div {
    background-color: rgba(0, 0, 255, 0.5); /* semi-transparent blue */
}

Using HSL Values

div {
    background-color: hsl(120, 100%, 50%); /* green */
}

Using HSLA Values

div {
    background-color: hsla(240, 100%, 50%, 0.3); /* semi-transparent blue */
}

Applying Background Colors to Different Elements

You can apply background colors to various HTML elements, such as divs, paragraphs, headers, etc. Here are a few examples:

Background Color for a <div> Element

<div style="background-color: lightblue;">
    This is a div with a light blue background.
</div>

Background Color for a <p> Element

<p style="background-color: yellow;">
    This is a paragraph with a yellow background.
</p>

Background Color for a <h1> Element

<h1 style="background-color: lightgreen;">
    This is an H1 with a light green background.
</h1>

Conclusion

The background-color property is a powerful tool in CSS that allows you to add color to the background of HTML elements. Experiment with different color values to create visually appealing designs.