Chapter 2 - Did I inherit my beautiful fur?

Lulu — Don't you think my fur is so beautiful? Chrome — Yes, Lulu. I do. And you should be thankful. You inherited it from your parents. Lulu — Inherited? Chrome — Yes. We all inherit most of our body features from our parents. Like hair, eyes, everything! Lulu — That sounds interesting. How cool it'd be if elements could inherit styles from their parents. Or grandparents. Or great-grandparents. Chrome — Well, elements do inherit styles from their ancestral elements. And it's actually a very interesting topic that's confused with cascade often. Come, see how you can use it in your CSS!

Recall that 'cascaded value' is a value for a property applied to an element by the browser as a result of cascade. But if you haven't written a declaration for a property, then that specific property cannot have a 'cascaded value'. In such cases, inheritance is the way browsers assign value to properties. Usually, these are the properties that better be inherited. For example - color, text-align, list-style, etc. There's no single definitive source for list of CSS properties that inherit, but this link should help.

Lulu — That's kinda nice. How can I use that? Chrome — Probably, you're using it already. When you write -


body {
	font-family: 'Arial', sans-serif;
}

all the elements on the page (being child elements of 'body'), inherit the 'font-family'. That's inheritance at work! That's the reason it's a common practice to assign most common font to 'body' and save yourself from declaring it again and again for each element.

The inheritance flows from the node on which the inherited property is defined to the last child in the hierarchy.

Remember that inherited value is low priority. A cascaded value will always override it.

Properties to control inheritance

inherit

'inherit' is not a very commonly used value in CSS. However, there are times when inheritance makes things work for us. But cascaded value is restricting it from happening. In such scenarios you can use 'inherit' value to make inheritance work explicitly.

Lulu — Can you help me with an example?

Chrome — Sure, Lulu. Consider you're designing a beautiful website for cats. And you've already assigned blue color for your links (anchor tags) with


a:link {
  color: blue;
}

Next, you design a black navbar with white text inside it. So maybe you do something like


.navbar {
  background-color: black;
  color: white;
}

When you start adding links, they will still show up in blue color. To make it white, you can use 'inherit' value. Look at this -


.navbar a {
  color: inherit;
}

The advantage of using 'inherit' instead of 'white' here is that even if you decide to change your navbar text color to something else, you need to make change only in one place.

initial

Every property in CSS has a default value. And that exactly, is what 'initial' value is. Whenever you assign 'initial' to a property, it's value resets to the default.

For eg, (color: initial;) will always equal to (color: black;)

But, you need to take care of two things when working with 'initial' value-

'initial' is purely property controlled

'initial' always resets to property's initial value. Not to the default value of property for that particular element.

For example, a 'div' is a block element. Which means it is (display: block;) by default.

However, if you assign (display: initial;) to a 'div', it'll make it inline because initial value of 'display' is 'inline'.

Silent overriding in shorthand properties

Shorthand properties are properties those let you set multiple properties at once. For example, you can set font-family, font-weight, line-height, etc using 'font'. Something like (font: Arial bold 18px;).

The catch is that all the values that you don't give, are assigned 'initial' by the browser. Take this example -


p {
  font-weight: bold;
  font: Arial 18px;
}

This will give font-weight a value of 'normal' (since initial value of font-weight is 'normal').

Lulu — How can you do that?! How can assign 'initial' value without my consent?

Chrome — I don't need your consent Lulu.

Lulu — Do all other browsers do this fraud?

Chrome — What do you mean fraud?!

Lulu — (Dramatically!) Oh god! Sweet, innocent me in this evil web world!

unset

'unset' is yet another value to control inheritance. It has a simple either-or behavior. If you assign 'unset' to a property, the browser will give it inherited value if the element is naturally inheriting a value, else it will set it to 'initial'.

Lulu — Okay, okay. Enough. I'm hungry now!

Chrome — Yep, I've got some tuna for you.

Lulu — Wow. You're such a nice fraud! Haha. I mean hooman.