A background color is the CSS paint behind an element. It can fill the whole page, a heading, paragraph, link, <div>, <span>, or another selected item. section 4.29
Build the rule in two small steps:
- Choose the element or selector to paint. section 4.29
- Add background-color and give it a color keyword or other color value. section 4.29
A dark sidebar
div { background-color: black; color: white; } The first declaration paints the <div> black; the second keeps its text readable in white. Try changing black to another color and watch the sidebar transform. section 4.30
selector { #1
background-color: keyword; #2
}
Use this compact pattern as a reminder: place a selector before the property, then replace keyword with the color you want. section 4.29
For full-width content bands, put the background color on an outer <div> and keep readable, centered content inside a nested container. This lets the paint reach the browser edges without making the text stretch too far. section 10.36
