CSS Inheritance Guide – Inherited vs Non-Inherited Properties Explained

calender-iconPublished: 23 Jun 2025

clock-icon5-min read

printer-icon whatsapp-icon share-icon



close-button
CSS
Table of Contents

INTRODUCTION

Inheritance allows child elements to automatically receive certain property values from their parent elements without needing to re-declare them. It is an mechanism which decides what happens when no value is defined for an property on an element. It helps to maintain consistency of design style across a webpage.

Example: Consider an Ordered list, if you apply an color of blue to the Ordered list element <ol> , then this color is applied to all list items <li> including its marker. This happens due to inheritance.

Direction of Flow

Inheritance always flows downwards i.e. the value of CSS properties pass from an HTML elements to its descendant. It continues to flow until its last nested element. The Values are never propagated upwards so no elements passes an value to its parent element.

It becomes more clear when you see tree-diagram of HTML webpage. The root element (<html>) is the first element of webpage, so it does not inherit anything. When you add some CSS rule to <html> element, it will flow down the document to its descendant element. 


html                   ← Root element
├── head               ← Document metadata
│   ├── meta charset="UTF-8"
│   ├── meta name="viewport"
│   ├── title
│   │   └── "Page Title"
│   ├── link rel="stylesheet"
│   └── script src="script.js"
│
└── body               ← Visible content
    ├── header
    │   ├── nav
    │   │   └── ul
    │   │       ├── li
    │   │       │   └── a href="#home"
    │   │       │       └── "Home"
    │   │       ├── li
    │   │       │   └── a href="#about"
    │   │       │       └── "About"
    │   │       └── li
    │   │           └── a href="#contact"
    │   │               └── "Contact"
    │   └── h1
    │       └── "Welcome to My Website"
    │
    ├── main
    │   ├── section id="hero"
    │   │   ├── h2
    │   │   │   └── "Hero Section"
    │   │   └── p
    │   │       └── "This is the main content area"
    │   │
    │   └── section id="content"
    │       └── article
    │           ├── h3
    │           │   └── "Article Title"
    │           ├── img src="image.jpg" alt="description"
    │           └── p
    │               └── "Article content..."
    │
    └── footer
        ├── div class="footer-content"
        │   ├── p
        │   │   └── "© 2025 My Website"
        │   └── div class="social-links"
        │       ├── a href="#"
        │       │   └── "Facebook"
        │       └── a href="#"
        │           └── "Twitter"
        └── script src="footer-script.js"

EXCEPTION:

This downward flow of inheritance rule has an exception. This exception happens only with <body> element and only under certain conditions. When an background is applied to <body> element, it is passed upward to <html> element. This happens only when the background is not defined for <html> element.


Inherited and Non-Inherited Properties

In CSS properties can be classified into two types.

  • Inherited Properties
  • Non-Inherited Properties

Not all properties are Inherited in CSS. If all properties inherit in CSS it would create undesirable outcomes and extra CSS rules need to be written to block or reverse unintended inherited CSS styles.


Inherited Properties

When no value is defined for an property on an element and the element takes the computed value of that property from its parent element, Such properties are called Inherited properties. We had listed all the Inherited properties below.

Category Property Description
Text & Font color Defines the color of the text content.
letter-spacing Adjusts the spacing between characters in text.
line-height Determines the vertical spacing between lines of text.
text-align Controls the horizontal alignment of inline content.
text-indent Indents the first line of text within a block element.
text-transform Controls capitalization: uppercase, lowercase, capitalize.
visibility Determines whether an element is visible, hidden, or collapsed.
word-spacing Specifies the spacing between words.
cursor Specifies the type of mouse cursor to be displayed.
Font font Shorthand for font-style, font-variant, font-weight, font-size, line-height, and font-family.
font-family Specifies the font typeface used for text.
font-size Defines the size of the font.
font-style Sets the style of the font (e.g., italic, normal).
font-weight Controls the thickness or boldness of the font.
List list-style Shorthand for list-style-type, list-style-position, and list-style-image.
list-style-image Specifies an image as the list item marker.
list-style-position Defines the position of the list item marker (inside/outside).
list-style-type Sets the type of list marker (e.g., disc, decimal).
Table border-collapse Controls whether table cell borders are collapsed or separated.
border-spacing Specifies spacing between the borders of adjacent cells.
Direction direction Defines the direction of text (ltr or rtl).


Non-Inherited Properties

When no value is defined for an Non-inherited property on an element and the element takes the initial value of that property, such properties are called Non-Inherited Properties. We had listed all the Non-Inherited properties below.

Category Property Description
Box Model margin Sets the space outside the border of an element.
padding Sets the space between the content and the border.
border Sets the border of an element (width, style, color).
width Defines the width of an element.
height Defines the height of an element.
box-sizing Defines how width and height are calculated (content-box or border-box).
Positioning position Specifies how an element is positioned in the document (static, relative, absolute, fixed, sticky).
top Specifies the top position offset of an element.
right Specifies the right position offset.
bottom Specifies the bottom position offset.
left Specifies the left position offset.
z-index Controls the stack order of elements (front to back).
Display display Specifies how an element is displayed (block, inline, flex, etc.).
overflow Controls how content overflows an element's box.
float Places an element to the left or right, allowing content to wrap around it.
Flexbox flex Shorthand for flex-grow, flex-shrink, and flex-basis.
flex-direction Defines the direction of the main axis (row, column).
justify-content Aligns flex items along the main axis.
align-items Aligns flex items along the cross axis.
Grid grid-template-columns Defines column structure in a grid container.
grid-template-rows Defines row structure in a grid container.
gap Sets spacing between grid or flex items.
Background background-color Sets the background color of an element.
background-image Applies an image as the background.
background-position Defines the initial position of the background image.
background-size Specifies the size of the background image.
Border border-width Defines the width of the border.
border-style Specifies the style of the border (solid, dashed, etc.).
border-color Specifies the color of the border.
Transform & Animation transform Applies 2D or 3D transformations to an element.
transition Specifies transition effects between property changes.
animation Defines keyframe-based animations.
Miscellaneous opacity Sets the transparency level of an element.
box-shadow Applies shadow effects around an element's frame.
pointer-events Defines whether an element can become the target of mouse events.

Specificity of Inherited Values

When a value is inherited it has no Specificity at all. This means it does not have even zero Specificity. So any other CSS rule like Universal selector (with 0 Specificity) takes precedence over inherited values. You can explore Specificity in detail at this page on our website.

Consider the following example and try to guess which CSS rule will win. 


h3{ 
 color: gray; 
}

div{ 
 color: blue;
}



<div>
 <h3>
  Sample H3 Heading 
 </h3> 
</div>

Sample H3 Heading

Explanation: The specificity of h3 tag is 0-0-0-1(a = 0 (no inline styles), b = 0 (no ID), c = 0 (no class, attribute, or pseudo-class), d = 1 (one type selector: h3)). As mentioned earlier inherited property has no Specificity at all not even 0. So h3 tag color property takes precedence over the inherited CSS property color from the parent div element.

Frequently Asked Questions (FAQ)

How to prevent CSS inheritance?
To prevent CSS inheritance, you can use the following techniques:
  • Override with Specific Values - Set the desired CSS property explicitly on the child element:
  • Use initial Keyword - The initial keyword resets a property to its default value, which is typically not inherited:
  • Use unset Keyword - The unset keyword removes the inherited value: Inherited properties → act like initial Non-inherited properties → become initial
  • Use all Property: - To reset all inheritable and non-inheritable properties at once

Which CSS properties are inherited by default?
We had listed all the Inherited properties below.
Category Property Description
Text & Font color Defines the color of the text content.
letter-spacing Adjusts the spacing between characters in text.
line-height Determines the vertical spacing between lines of text.
text-align Controls the horizontal alignment of inline content.
text-indent Indents the first line of text within a block element.
text-transform Controls capitalization: uppercase, lowercase, capitalize.
visibility Determines whether an element is visible, hidden, or collapsed.
word-spacing Specifies the spacing between words.
cursor Specifies the type of mouse cursor to be displayed.
Font font Shorthand for font-style, font-variant, font-weight, font-size, line-height, and font-family.
font-family Specifies the font typeface used for text.
font-size Defines the size of the font.
font-style Sets the style of the font (e.g., italic, normal).
font-weight Controls the thickness or boldness of the font.
List list-style Shorthand for list-style-type, list-style-position, and list-style-image.
list-style-image Specifies an image as the list item marker.
list-style-position Defines the position of the list item marker (inside/outside).
list-style-type Sets the type of list marker (e.g., disc, decimal).
Table border-collapse Controls whether table cell borders are collapsed or separated.
border-spacing Specifies spacing between the borders of adjacent cells.
Direction direction Defines the direction of text (ltr or rtl).

Can CSS Classes Inherit?
CSS classes themselves do not inherit styles from other classes. Elements inherit styles, not the classes.

Which CSS properties are not inherited?
We had listed all the Non-Inherited properties below.
Category Property Description
Box Model margin Sets the space outside the border of an element.
padding Sets the space between the content and the border.
border Sets the border of an element (width, style, color).
width Defines the width of an element.
height Defines the height of an element.
box-sizing Defines how width and height are calculated (content-box or border-box).
Positioning position Specifies how an element is positioned in the document (static, relative, absolute, fixed, sticky).
top Specifies the top position offset of an element.
right Specifies the right position offset.
bottom Specifies the bottom position offset.
left Specifies the left position offset.
z-index Controls the stack order of elements (front to back).
Display display Specifies how an element is displayed (block, inline, flex, etc.).
overflow Controls how content overflows an element's box.
float Places an element to the left or right, allowing content to wrap around it.
Flexbox flex Shorthand for flex-grow, flex-shrink, and flex-basis.
flex-direction Defines the direction of the main axis (row, column).
justify-content Aligns flex items along the main axis.
align-items Aligns flex items along the cross axis.
Grid grid-template-columns Defines column structure in a grid container.
grid-template-rows Defines row structure in a grid container.
gap Sets spacing between grid or flex items.
Background background-color Sets the background color of an element.
background-image Applies an image as the background.
background-position Defines the initial position of the background image.
background-size Specifies the size of the background image.
Border border-width Defines the width of the border.
border-style Specifies the style of the border (solid, dashed, etc.).
border-color Specifies the color of the border.
Transform & Animation transform Applies 2D or 3D transformations to an element.
transition Specifies transition effects between property changes.
animation Defines keyframe-based animations.
Miscellaneous opacity Sets the transparency level of an element.
box-shadow Applies shadow effects around an element's frame.
pointer-events Defines whether an element can become the target of mouse events.

Is color inherited in CSS?
Yes, the color property is inherited by default in CSS. If you set the color on a parent element, child elements will automatically inherit that text color unless they explicitly override it.

Is width Inherited in CSS?
No, the width property is not inherited by default in CSS. CSS only inherits certain properties automatically, mostly related to text and appearance, like color, font, and line-height. width is a box-model property, and such properties do not inherit.

Is CSS display inherited?
No, the display property is not inherited by default in CSS. The display property (like block, inline, flex, etc.) controls how an element is rendered in the layout — but it does not pass down to child elements.

Is opacity inherited in CSS?
No, the opacity property is not inherited in CSS by default. While opacity itself is not technically inherited, it affects all child elements visually because it applies to the entire element and its subtree.