In CSS, a property that is applied to an element is also inherited by the child elements of that element. For example, if the font-family property is declared for the BODY element, it is automatically applied to all the elements present inside the BODY element. This inheritance saves your time in writing the repeated code for every single element that constitutes the Web page. The following code fragment shows inheritance in CSS.
<div style="font-family:serif; border:1px solid red; padding:10px;> This text will be in a serif font. <p> This text is also in a serif font, because font is inherited by default. But the border and padding properties are not inherited from the parent div. </p> </div>
In the above code fragment, font-family is automatically inherited by the p element from the parent div element. In this case, border and padding properties are not inherited from the parent element.
Following table describes CSS properties that are inherited automatically.
|border-collapse||Represents the border display|
|border-spacing||Represents the thickness of the border|
|caption-side||Represents the place of the table caption|
|color||Represents the color of a text|
|cursor||Represents the cursor to be displayed|
|direction||Represents the direction of a text|
|empty-cells||Specifies whether to display the border and background on empty cells|
|font||Specifies all the font properties|
|font-family||Represents the font family of a text|
|font-stretch||Represents text as stretched or condensed|
|font-size||Represents the size of a text|
|font-size-adjust||Represents the size of the text on the basis of an aspect value|
|font-style||Represents the style of a text|
|font-variant||Represents the fonts variant, such as small caps|
|font-weight||Represents the font as bold|
|letter-spacing||Represents the space between the characters in a text|
|line-height||Represents the height of a line|
|list-style||Represents the style of the list|
|list-style-image||Represents an image as a list marker|
|list-style-type||Represents the type of a list marker|
|quotes||Represents the quotation marks in a text|
|text-align||Represents the horizontal alignment of a text|
|text-indent||Represents the indentation of a text|
|text-transform||Represents the transformation of text, such as uppercase, capitalize, or lowercase|
|white-space||Handles the spaces in an element|
|word-spacing||Represents the spacing between the words in a text|
© Copyright 2021. All Rights Reserved.