Understanding Inheritance in HTML - HTML

Inheritance is the act of picking up attributes from one’s ancestors. In CSS, all foreground properties are passed down (inherited) to descendent elements. For example, this definition would result in all elements being rendered in blue, because every tag in the document is a descendent of the body tag:

body { color: blue; }

Note that this is only true for foreground properties. Background properties (background color, image, and so on) are not inherited. Inheritance is the default action unless an element has the same attribute defined differently. For example, the following definitions result in all elements, except for paragraphs with a notblue class, being rendered in blue:

body { color: blue; } p.notblue { color: red; }

Instead of blue, the notblue paragraphs are rendered in red. Attributes that are not in conflict are cumulative on descendent elements. For example, the following rules result in paragraphs with an emphasis class being rendered in bold, blue text:

body { color: blue; } p.emphasis { font-weight: bold; }

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML Topics