Inheritance

When we are stying our content by changing the look of fonts, we are working with properties which are inherited.

What this means is that if you want to use the same font or color throughout most of your site, you don’t have have to select every individual element to declare those properties on.

Instead, we can rely on inheritenance, which is when an element inherits a style from one of it’s ancestors. Inheritance is an incredibly useful CSS feature that a surpring number of people don’t take advantage of.

In HTML, everything visible on the screen is a descendant of the body element.

Because of that, it’s very common to declare a lot of typography related things on the body, and to then rely on inheritance.

As an example, in the code below, remove all of the selectors, and replace them all with a single body selector, keeping the same color and font-family, and you’ll see that the result is exactly the same.

Now, if you change the color to #991857, you’ll see it changes on all of the elements at once!

You can also do the same for the font-family.

This is because all of those elements are inheriting their color and font from the the body.

As a general rule of thumb, properties that style type are inherited, while layout-related properties are not.

Let’s take advantage of inheritance

Can you think of how we could take advante of inheritance in our project?

Form-related elements don’t inherit

Form-related elements, such as <input>, <select>, <textarea> and <button> don’t inherit font properties. They have user agent styles that get in the way (the same way that buttons are blue and underlined). For that reason, I usually declare the following in my CSS reset (more on resets in a bit).

input,
select,
textarea,
button {
  font: inherit;
}