CSS Inheritance

« Previous Tutorial Next Tutorial »

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.
		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.

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.

Automatically Inherited CSS Properties

Following table describes CSS properties that are inherited automatically.

Properties Description
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

« Previous Tutorial Next Tutorial »


Quick Links
Signup - Login - Give Online Test