How to change the background color

Short answer

background-color sets the background color:

<div style="background-color: lightyellow; padding: 12px;">A yellow note</div>

How to write a color

The same color can be written in several ways — pick the format you like:

<style>
  .s { padding: 6px 10px; margin-bottom: 4px; color: white; }
</style>
 
<div class="s" style="background-color: teal;">Name: teal</div>
<div class="s" style="background-color: #008080;">Hex: #008080</div>
<div class="s" style="background-color: rgb(0 128 128);">RGB: rgb(0 128 128)</div>
<div class="s" style="background-color: hsl(180 100% 25%);">HSL: hsl(180 100% 25%)</div>

hsl() makes picking shades easy: change the last number and the color gets lighter or darker.

The background of the whole page

Set the background on the body element:

body { background-color: #f5f5f0; }

The background shorthand sets the color too, but it also resets the image, size and other background settings. If you only change the color, write background-color.

Common mistake

People change the background and forget the text color: dark text on a dark blue background is unreadable. Always set color together with the background and check the contrast — developer tools show it next to the color.