Inheritance and Cascading Styles in CSS Explained

1. Styles can be inherited from a parent

Some styles, like font family, text-alignment etc., are automatically inherited by child elements from their parent element (i.e. by an element contained inside another one).
Others are not automatically inherited.

Example

<div style=”font-family:serif; border:1px solid red; padding:10px;”>

This text will be in a serif font.
<p>
This text is also in a serif font, because font is inherited by default.
But the border and padding properties are not inherited from the parent div.
</p>

</div>

However, you can make an element inherit styles from its parent.

Example

<div style=”font-family:serif; border:1px solid red; padding:10px;”>

This text will be in a serif font.
<p style=”border:inherit;”> 

Now the paragraph also has a red border.
Border properties are not inherited by children, by default, but because I set border to “inherit”, it is.

</p>

</div>