Elements are organised in a tree structure with the main element (body) being the head, and all other elements are child elements nested within it. Child elements may also contain other child elements.
Properties inheritance is when certain properties applied to the parent element get passed down to all child elements.
The advantage of inheritance is that you don’t need to modify each element separately since the child elements take on the properties from the parent element making it quicker and more efficient.
Some inherited properties:
- Font Family
- Variant (CSS properties: font-weight and font-style)
- Decoration (CSS property: text-decoration)
- Transform (CSS properties: text-transform and font-variant)
- Font Size
- Letter Spacing
- Word Spacing
- Line Height
- Text Shadow
In short: the properties related to text, listing and color.
Not all properties can be inherited:
- Background color
- Background image
- Border and round corners
- Width and Height
- Margin and Padding