Inheritance means drawing down properties from a higher level object/class. It is a key paradigm in Object Oriented Programming wherein a derived class can inherit properties and methods from a parent class. CSS inheritance has the same context but with reference to Style Elements of CSS.
CSS Inheritance comes into play when no CSS rule is defined for an HTML element but it is done for its outer HTML element. It means that when one element in an HTML page is nested inside another HTML element, the inner element inherits all the CSS styles of the outer elements. This happens when the inner element style rules or definition is not included in CSS and the property is of type inherited.
CSS Inheritance is beneficial as it removes the necessity of declaring styles for every element that you may use in designing your web pages. It gives you the freedom to define CSS style for outermost elements and implicitly get same styles applied on all the contained (inner) HTML elements. All the CSS rules defined for the parent HTML element (Selector) are automatically applied to all the child elements.
For example if you stylize the BODY tag in CSS using BODY as selector and you don’t define style for any other HTML element then all the HTML elements placed inside BODY tag in a page inherit the inheritable properties of BODY selector.
Types of CSS Inheritance Properties
With reference to CSS properties, we have two categories of properties to understand
Inherited Property
It is a CSS property whose default value is derived from the computed value of the outer HTML element. Color is an inherited property. It means that if the parent element’s color property CSS rule is defined, it will affect the color property of the child element. Color property rule of BODY selector is applied to color property of <P> tag, if its color CSS rule is not set.
Example- inner element CSS rule not defined
<HEAD><STYLE TYPE="text/css">
BODY{COLOR:#FFFFFF; BACKGROUND-COLOR:#000000; FONT-SIZE:14px;}
</STYLE></HEAD>
<BODY>
<H1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </H1>Integer nec odio. Praesent libero.
Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
Vestibulum lacinia arcu eget nulla. <H2>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor.</H2>
<P>Pellentesque nibh. Aenean quam. In scelerisque sem at dolor.
Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor.
Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet.
Mauris ipsum. Nulla metus metus, ullamcorper vel,</P>
</BODY>Example- inner element CSS rule defined
<HEAD><STYLE TYPE="text/css">
P{COLOR:PINK; FONT-STYLE:italic;}
BODY{COLOR:#FFFFFF; BACKGROUND-COLOR:#000000; FONT-SIZE:14px;}
H1{COLOR:yellow; FONT-SIZE:22px;FONT-STYLE:BOLD;}
</STYLE></HEAD>
<BODY>
<H1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </H1>Integer nec odio. Praesent libero.
Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
Vestibulum lacinia arcu eget nulla. <H2>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor.</H2>
<P>Pellentesque nibh. Aenean quam. In scelerisque sem at dolor.
Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor.
Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet.
Mauris ipsum. Nulla metus metus, ullamcorper vel,</P>
</BODY>Non-inherited Property
It is a CSS property whose default value is not derived from the Parent HTML element. It is the predefined initial value of the property. For example Border-Style property is non-inherited. It means that if the parent element Border-Style CSS rule is defined, it will not be applied to a child element. Border-Style property rule of BODY selector is not applied to <P> tag because default Border-style for all elements is None.
Example- inner element CSS rule not defined
<HEAD><STYLE TYPE="text/css">
BODY{COLOR:#FFFFFF; BACKGROUND-COLOR:#000000; FONT-SIZE:14px;border-style:solid}
</STYLE></HEAD>
<BODY>
<H1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </H1>Integer nec odio. Praesent libero.
Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
Vestibulum lacinia arcu eget nulla. <H2>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor.</H2>
<P>Pellentesque nibh. Aenean quam. In scelerisque sem at dolor.
Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor.
Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet.
Mauris ipsum. Nulla metus metus, ullamcorper vel,</P>
</BODY>Example- inner element CSS rule defined
<HEAD><STYLE TYPE="text/css">
P{COLOR:PINK; FONT-STYLE:italic;border-style:dotted}
BODY{COLOR:#FFFFFF; BACKGROUND-COLOR:#000000; FONT-SIZE:14px;border-style:solid}
</STYLE></HEAD>
<BODY>
<H1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </H1>Integer nec odio. Praesent libero.
Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
Vestibulum lacinia arcu eget nulla. <H2>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor.</H2>
<P>Pellentesque nibh. Aenean quam. In scelerisque sem at dolor.
Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor.
Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet.
Mauris ipsum. Nulla metus metus, ullamcorper vel,</P>
</BODY>