Web Facts On CSS Inheritance

In this article knowing all about CSS Inheritance is discussed. It includes the analogy of the CSS family tree, its usage and desirable inherited properties.

Some of you might be excited in creating web page design and that in some point, because of impulsive actions you may end up in big trouble especially when you don’t know how to trouble shoot. Knowing how to deal with these issues comes with familiarity and with trial and error. Part of these know-hows is to understand an often overlooked concept: The concept of Inheritance. It might look boring and hard to grasp but this word comes as a fundamental approach in crafting a more desired output which helps maintain a clean cut of flexible style sheets. Let us look into the facts of what CSS inheritance is.

The CSS Family Tree

CSS Inheritance is the mechanism by which styles are applied not only to a specified element but also to its descendant. Before we go into the very details of this concept, let us first look into the general idea of Inheritance by using the analogy of a family tree. You have to remember that all HTML documents are trees which serve as the structure of your family. The parent is the element that is connected directly above an element in a family tree while the child is the element that is directly connected below it. In other words, inheritance is about passing down specific CSS properties from a parent to a child element.

How To Use Inheritance

Remembering that each element in an HTML document is part of a tree, you can be guided that whatever styles applied to a parent element can also be inherited to the element enclosed in it. For example, in this HTML, an H1 tag is enclosing an EM tag:

<h1>This will be a <em>Large</em> Headline</h1>


In this example the parent element would be the H1 tag while EM tag is the child element. Whatever properties the H1 tag obtained will also be passed down to the EM tag.

H1 {font-size:170%;}


Since the property font size of H1 tag is 170%, the Big word will also inherit the same font size as well as the rest of the H1 tag.

Inherited CSS Properties

The easiest way to use Inheritance is to become familiar with CSS properties that can be inherited. Not all properties can be passed down because if every property is to be inherited it would make things harder for web designers. An example of which is border property.

Luckily border property is not inherited so that the child element would not have a red border. Basically, only properties that make our jobs easier are inherited such as:

  • Speak-punctuation
  • List-style-position, image, type, height
  • Font-family, size, style, vairant, wieght
  • Text- indent, transform, align
  • Elevation
  • Color