Inheritance

Some properties are passed on from an element to its descendants. This is called inheritance. When you set the text color of an element, all the text inside it gets that color, including the text of its children, grandchildren and so on, unless a rule sets their own color.

#breeds {
	color: purple;
}

With this rule, the list items would be purple, because they inherit the color from #breeds. The heading in it would stay olive green, because the rule for h2 sets its own color, and an element’s own rule always wins over an inherited value.

Mostly the properties of text are inherited: color, font-family and the other properties starting with font-, text-align or text-transform. That’s why the main heading is centered: you set text-align on the div, and the h1 inherited it.

The properties of the element’s box, the rectangle that the element takes up on the page, are not inherited: border, background-color, and also the sizes and spacing you’ll learn in the lesson CSS Box Model. The div with the id breeds has a border, but the heading and the list inside it don’t. The paragraphs in the groups look as if they had a beige background too, but they don’t: their background is transparent, so the background of the group shows through.

Inheritance saves a lot of work. That’s why the text color and the font of a whole page are usually set on body, and all the elements on the page inherit them.