HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

CSS Colors and Backgrounds

CSS Background Color

The CSS Background Color property is used to set the background color of an HTML element.

It helps improve the visual appearance of a webpage and can be applied to elements like:

  • Body
  • Headings
  • Paragraphs
  • Div containers

Using background colors effectively enhances readability and design layout.

Syntax

css

selector {
    background-color: value;
}

Example

css

body {
   background-color: lightblue;
}

👉 This sets the background color of the entire page.

Attributes

PropertyDescriptionExample
background-colorSets background colorbackground-color: yellow;
colorSets text colorcolor: black;
borderAdds border to elementborder: 1px solid black;
paddingAdds inner spacingpadding: 10px;

Example

Complete Background Color Example

html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Background Color</title>
    <style>
        body {
            background-color: lightgray;
        }
        h1 {
            background-color: lightblue;
            color: black;
        }
        p {
            background-color: yellow;
        }
        div {
            background-color: pink;
            padding: 10px;
            border: 1px solid black;
        }
    </style>
</head>
<body>

    <h1>Background Color Example</h1>
    <p>This paragraph has a yellow background.</p>
    <div>This is a div with pink background.</div>

</body>
</html>

Output

Browser Output

css

The page will have a light gray background
The heading will have a light blue background
The paragraph will have a yellow background
The div will have a pink background with border and padding

Browser Support

Chrome
Firefox
Edge
Safari
Opera
IE9+
✅Yes✅Yes✅Yes✅Yes✅Yes✅Yes

Notes

  • Use background-color to set solid background colors
  • Can use color formats like name, HEX, RGB
  • Helps improve contrast and readability
  • Avoid using very bright or clashing colors
  • Combine with text color for better accessibility

Conclusion

The CSS Background Color property is essential for designing visually appealing web pages. It allows you to highlight sections, improve readability, and create a structured layout using colors effectively.

PreviousCSS RGB ColorsNextCSS Background Image