Цвет фона

У каждого элемента есть фон. По умолчанию он прозрачный, поэтому мы видим сквозь него то, что находится позади: в нашем случае — белую страницу.

Свойство background-color заливает фон цветом. Фон закрывает всю область элемента, а не только место позади букв. Посмотрите на чёрную область вокруг главного заголовка: она шириной во всю страницу, хотя сам заголовок короткий.

Элемент body здесь особенный: браузер закрашивает его фоном всё окно.

Как вы знаете из урока о селекторах, background-color, в отличие от color, не наследуется. Может показаться, что наследуется: если задать фон элементу main, у абзацев внутри него будто бы тоже появится этот фон. На самом деле у абзацев остаётся прозрачный фон, а мы видим сквозь него фон main.

Выбирая цвета, думайте о контрасте: текст должен чётко выделяться на фоне. Тёмный текст на светлом фоне или светлый на тёмном читать легко, а серый на сером — трудно:

Чёрный текст на белом фоне читать легко.

Тёмно-серый текст на сером фоне читать трудно.