Inheritance
Some CSS properties set for a parent element are inherited by its child and descendant elements. For example, when blue is set in the color property of the body element, the font color in the entire document becomes blue. This is because the color property value set for the body element is inherited by its child and descendent element. In other words, the style cascades. The name of CSS (Cascading Style Sheet) derives from this feature. Because of this feature, you don't need to set the color property for each element.
Not all properties are inherited by default. For example, border-related properties are not inherited by default. This makes sense because if you set a solid borderline in the body element and the property is inherited by all elements, the website will overcrowded with many borderlines.
Properties inherited by default
Font-related properties tend to be inherited. Here are examples of properties inherited by default.
colorfont-familyfont-weightfont-styleline-heightletter-spacingtext-align
The font-size property is inherited, but it can be overwritten for some elements such as headings.
Properties not inherited by default
Sizing, spacing, border, background, and layout-related properties are usually not inherited. Here are examples of properties not inherited by default.
heightwidthmarginpaddingborder-boxbackground propertiesborder properties
Inherit keyword for a property value
Even if a property is not inherited, you can make a parent element's property value inherited as a child element's property value. You can use inherit as a keyword of the property value at the child element level.
For example, if you set inherit for the border property in each element, the blue borders will apply to each element.
<section style="border: solid blue">
<div style="border: inherit">
<h1 style="border: inherit">Hello, World!</h1>
<p style="border: inherit">Say hello.</p>
</div>
</section>
The code above gives the image shown below in a browser. As you can see, if the border properties are inherited by default, there will be too many lines by default.
Some CSS properties set for a parent element are inherited by its child and descendant elements. For example, when blue is set in the color property of the body element, the font color in the entire document becomes blue. This is because the color property value set for the body element is inherited by its child and descendent element. In other words, the style cascades. The name of CSS (Cascading Style Sheet) derives from this feature. Because of this feature, you don't need to set the color property for each element.
Not all properties are inherited by default. For example, border-related properties are not inherited by default. This makes sense because if you set a solid borderline in the body element and the property is inherited by all elements, the website will overcrowded with many borderlines.
Properties inherited by default
Font-related properties tend to be inherited. Here are examples of properties inherited by default.
colorfont-familyfont-weightfont-styleline-heightletter-spacingtext-align
The font-size property is inherited, but it can be overwritten for some elements such as headings.
Properties not inherited by default
Sizing, spacing, border, background, and layout-related properties are usually not inherited. Here are examples of properties not inherited by default.
heightwidthmarginpaddingborder-boxbackground propertiesborder properties
Inherit keyword for a property value
Even if a property is not inherited, you can make a parent element's property value inherited as a child element's property value. You can use inherit as a keyword of the property value at the child element level.
For example, if you set inherit for the border property in each element, the blue borders will apply to each element.
<section style="border: solid blue">
<div style="border: inherit">
<h1 style="border: inherit">Hello, World!</h1>
<p style="border: inherit">Say hello.</p>
</div>
</section>
The code above gives the image shown below in a browser. As you can see, if the border properties are inherited by default, there will be too many lines by default.
