Наследование

Некоторые свойства передаются от элемента его потомкам. Это называется наследованием. Когда вы задаёте цвет текста элементу, весь текст внутри него получает этот цвет, в том числе текст его детей, внуков и так далее, если только для них никакое правило не задаёт собственный цвет.

#breeds {
	color: purple;
}

С этим правилом элементы списка станут фиолетовыми, потому что наследуют цвет от #breeds. Заголовок в нём останется оливково-зелёным, потому что правило для h2 задаёт его собственный цвет, а собственное правило элемента всегда побеждает унаследованное значение.

В основном наследуются свойства текста: color, font-family и другие свойства, начинающиеся с font-, а также text-align и text-transform. Поэтому главный заголовок выровнен по центру: вы задали text-align для div, а h1 унаследовал его.

Свойства блока элемента, то есть прямоугольника, который элемент занимает на странице, не наследуются: это border, background-color, а также размеры и отступы, о которых вы узнаете в уроке «Блочная модель CSS». У элемента div с id breeds есть рамка, а у заголовка и списка внутри него — нет. Абзацы в группах выглядят так, будто у них тоже бежевый фон, но это не так: их фон прозрачный, поэтому просвечивает фон группы.

Наследование экономит много работы. Поэтому цвет текста и шрифт всей страницы обычно задают для body, и все элементы страницы их наследуют.