CSS Inheritance

Children inherit many traits from parents such as eye color, hair color, male pattern baldness etc. HTML tags can inherit CSS properties from their ancestors as well.

What is Inheritance?

Inheritance is the process in which CSS properties applied to a tag are passed on to nested tags. A <p> tag will be inside of the <body> tag – styles applied to the body tag will be applied to the <p> tag.

Inheritance works through multiple generations. If an <em> and <strong> tag appear inside of a <p> tag they inherit properties applied to the <body> tag. While this may seem confusing, it ensures that you don’t have to repeatedly apply styles.

In addition to tag styles inheriance works with class styles, ID styles, descendant selectors, etc.

How Inheritance Streamlines Style Sheets

If you want to pass styles onto ancestor tags, create a type selector tag for the body (or create a class and apply it to the body). The styles will be applied.

The Limits of Inheritance

Many CSS Properties don’t pass down to descendant tags. An example is the border tag. If a border was applied to every descendant tag it would mess things up.

Published by burnedfaceless

Brian Abbott is a student at Georgia Southern University's Armstrong campus in Savannah, GA.

Leave a comment

Your email address will not be published. Required fields are marked *