Inheritance

In the last step, we set the text color to white for nav, and it was also applied to the “Recent Posts” heading. Why did this happen? It’s all because of inheritance.

CSS inheritance is the mechanism by which some property values of a parent element are transmitted to its children elements.

The styles that are assigned to a single element are inherited by all of its children (nested elements), but only if they are not explicitly redefined somewhere else. For example, it is sufficient to apply a font size and color to the body tag to ensure that most of the elements inside have the same properties. Let’s consider an example of inheritance:

body {
  font-size: 14px;
}

nav {
  font-size: 18px;
}

The font size for the entire text on the page, except for the text inside the navigation, will be equal to 14px. The nav tag has its own declared value for the font size (18px), and it will be used instead of the value that is inherited from the body tag (14px). What is more, 18px will become the new inherited value for the children of the nav tag.

If the page from the example has headings, then the size of these headings will also not be the same as 14px. The fact is that the size of the headings is also explicitly set somewhere (and we will discuss this somewhere in the 11th assignment). This means that the headings have a declared value that will be used instead of the inherited value.

Let’s make sure that inheritance really works. Change the font name for the whole body.