Inheritance

Inheritance

  • Certain CSS properties such as font-family, font-size, color will be inherited by child properties

  • However, properties such as background color or border properties are not inherited

  • Click here to see a full list inherited and non-inherited CSS properties


Live Example

JS Bin on jsbin.com

In the example, the p element will automatically inherit the font color property from its ancestor (body) since color is a css property that can be inherited. These inherited styles can easily be overridden if you create css rules that are more specific that change the same property. This was done in the style for p.main where we specified a color property instead of inheriting it from the body element.