The background-color property sets the background color of an element using a color value or through keywords, such as transparent, inherit or initial.

• transparent, specifies that the background color should be transparent. This is default.
• inherit, inherits this property from its parent element.
• initial, sets this property to its default value.

This can be applied to all elements, and ::first-letter/::first-line pseudo-elements.

Colors in CSS can be specified by different methods.

Color names

CSS

div {
  background-color: red;  /* red */
}

HTML

<div>This will have a red background</div>

• The example used above is one of several ways that CSS has to represent a single color.

Hex color codes

Hex code is used to denote RGB components of a color in base-16 hexadecimal notation. #ff0000, for example, is bright red, where the red component of the color is 256 bits (ff) and the corresponding green and blue portions of the color is 0 (00).

If both values in each of the three RGB pairings (R, G, and B) are the same, then the color code can be shortened into three characters (the first digit of each pairing). #ff0000 can be shortened to #f00, and #ffffff can be shortened to #fff.

Hex notation is case-insensitive.

body {
  background-color: #de1205; /* red */
}

.main {
  background-color: #00f; /* blue */
}