background-color

by

Background-color sets the background color for an element.

It applies to various HTML elements like <div>, <p>, <span>, <button>, etc. It can be used to create visually appealing and informative layouts.

Syntax

background-color: color-value;

Color Values

You can specify the color value in several ways:

  • Named colors: Use predefined color names like red, blue, green, yellow, purple, etc.

    • background-color: red;
    • Hexadecimal color codes: Use a six-digit hexadecimal code representing RGB values (Red, Green, Blue).
    background-color: #FF0000; // Red
background-color: #00FF00; // Green
background-color: #0000FF; // Blue
    • RGB color values: Use the rgb() function with three comma-separated values representing Red, Green, and Blue intensities (0-255).
    background-color: rgb(255, 0, 0); // Red
background-color: rgb(0, 255, 0); // Green
background-color: rgb(0, 0, 255); // Blue
    • RGBA color values: Use the rgba() function with four comma-separated values representing Red, Green, Blue intensities (0-255) and alpha channel (opacity) (0-1).
    background-color: rgba(255, 0, 0, 0.5); // Red with 50% opacity
    • HSL color values: Use the hsl() function with three comma-separated values representing Hue, Saturation, and Lightness.
    background-color: hsl(0, 100%, 50%); // Red
    • HSLA color values: Use the hsla() function with four comma-separated values representing Hue, Saturation, Lightness, and alpha channel (opacity).
    background-color: hsla(0, 100%, 50%, 0.5); // Red with 50% opacity

    Example

    <div style="background-color: #FFD700;">This div has a gold background.</div>

    Additional Notes

    • You can apply background-color to various HTML elements to create different visual effects.
    • Combine background-color with other CSS properties like border, padding, and margin to achieve more complex designs.
    • Use color pickers or online tools to generate different color values.