Course: Backgrounds

background-color Property [1/16]

You can change the background color using the background-color CSS property.

Remember that you can specify colors in CSS in different formats: hexadecimal (HEX), RGB or RGBA or as color name, e.g., red or green.

For more on colors, please visit the W3C HTML Colors page or The Code Side Of Color article by Ben Gremillion.

Here is an example of using the property:

selector {
    background-color: #ff0000;

Do it
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>background-color Property</title> </head> <body> <div class="block block1"></div> <div class="block block2"></div> <div class="block block3"></div> <div class="block block4"></div> </body> </html>
body { padding: 10px; text-align: center; } .block { display: inline-block; width: 192px; height: 192px; margin: 5px; border-radius: 5px; box-shadow: 1px 1px 3px #999; } .block1 { } .block2 { } .block3 { } .block4 { }
HTML Academy

Set the background color:

  1. For Block 1 — #2ecc71
  2. For Block 2 — #3498db
  3. For Block 3 — #e74c3c
  4. For Block 4 — #e67e22.
Theory Check Next