The Concept of Cascade and Inheritance in CSS

Every successful CSS developer understands cascade and inheritance. It’s really pivotal. Now let me explain it to you.

Inheritance

The English word Inheritance means to receive something from a former owner. Usually, a predecessor, ancestor, parent or former owner.

The same may be said of CSS. Inheritance in CSS means that styles from parent elements can be inherited by children elements. i.e without specifying the style on the children element themselves.

Let’s see an example.

Consider the markup below:

<div class="parent">
	I am the parent element. 
  <p class="child"> I am the child element</p>
</div>

The markup is pretty simple.

We’ve got a div that houses a p element. i.e the div is the parent element, and the p a child element.

Is it possible to apply a style to the parent element, div and have it inherited by the child element, p ?

Let’s try to give the parent element a color of red. Does the child element inherit this value of red too?