Inheritance

Published Apr 15, 2022
Contribute to Docs

CSS inheritance describes how certain styles are initialized or computed depending on the CSS property and whether a value was set. Some properties are inherited with an initial, default value. Other properties are non-inherited and set to the computed value of its containing element by default.

Inherited properties

Inherited properties apply to the element and its children.

Property Description
color Sets the text color of an element.
cursor The cursor property sets the appearance of the mouse cursor when hovering over an element.
font Sets an element’s font properties in a single declaration.
font-family Specifies a font typeface in a ruleset.
font-size Sets the font size of an element’s text.
font-style To set the font style in which text will appear.
font-weight To set the text to be thicker or thinner.
letter-spacing Set the horizontal spacing between the individual characters in an element.
line-height Set the vertical spacing between lines of text.
text-align To set the text alignment of inline contents.
text-indent Indents (leaves empty space) the first line in a text-block.
text-justify Sets the justifcation method of text when text-align: justify; is applied to an element.
text-shadow Adds shadow to text.
text-transform Specifies how to capitalize an element’s text.
visibility Hides or reveals an element without affecting its placement within the page.
word-spacing Set space between words.

Non-inherited properties

Non-inherited properties are not inherited by its children.

Property Description
All background properties Adds wallpaper visuals for HTML elements.
All border properties Defines the border styles of an element.
box-sizing Includes padding and border in the calculation of an element’s height and width.
All Flexbox properties Arranges elements responsively and according to screen size.
float Repositions an element to the left or right side of its containing element.
All Grid properties Uses rows, columns, and gaps to organize content on a web page.
All margin properties Sets the spacing beyond the border of an element.
All overflow properties Manages content that spills outside of its box.
All padding properties Sets the spacing between the content and margin of an element.
All position properties Defines the placement of an element on a web page.
All sizing properties Defines the height and width values of an element.
text-decoration Styles the text of an element with line decorations.
text-overflow Specifies how hidden content is signaled to the user.
transform Allows us to rotate, scale, skew or translate an element.
transform-origin Sets the position of a transformed element relative to its origin.
transform-style Confirms whether an element’s children are flattened or positioned in a 3D space.
All transition properties Controls the animation speed and timing of property changes in an element.

All contributors

Looking to contribute?

Learn CSS on Codecademy