Inheritance
Published Apr 15, 2022Updated May 15, 2024
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 justification 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. |
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.
Learn CSS on Codecademy
- Career path
Front-End Engineer
Front-end engineers work closely with designers to make websites beautiful, functional, and fast.Includes 34 CoursesWith Professional CertificationBeginner Friendly115 hours - Free course
Learn CSS
In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.Beginner Friendly6 hours