When you set some properties on a selector in CSS, they are inherited by all the children of that selector.
I said some, because not all properties show this behaviour.
This happens because some properties make sense to be inherited. This helps us write CSS much more concisely, since we don’t have to explicitly set that property again on every single children.
Some other properties make more sense to not be inherited.
Think about fonts: you don’t need to apply the font-family
to every single tag of your page. You set the body
tag font, and every children inherits it, along with other properties.
The background-color
property, on the other hand, makes little sense to be inherited.
Properties that inherit
Here is a list of the properties that do inherit. The list is non-comprehensive, but those rules are just the most popular ones you’ll likely use:
border-collapse
border-spacing
caption-side
color
cursor
direction
empty-cells
font-family
font-size
font-style
font-variant
font-weight
font-size-adjust
font-stretch
font
letter-spacing
line-height
list-style-image
list-style-position
list-style-type
list-style
orphans
quotes
tab-size
text-align
text-align-last
text-decoration-color
text-indent
text-justify
text-shadow
text-transform
visibility
white-space
widows
word-break
word-spacing
I got it from this nice Sitepoint article on CSS inheritance.
Forcing properties to inherit
What if you have a property that’s not inherited by default, and you want it to, in a children?
In the children, you set the property value to the special keyword inherit
.
Example:
body {
background-color: yellow;
}
p {
background-color: inherit;
}
Forcing properties to NOT inherit
On the contrary, you might have a property inherited and you want to avoid so.
You can use the revert
keyword to revert it. In this case, the value is reverted to the original value the browser gave it in its default stylesheet.
In practice this is rarely used, and most of the times you’ll just set another value for the property to overwrite that inherited value.
Other special values
In addition to the inherit
and revert
special keywords we just saw, you can also set any property to:
initial
: use the default browser stylesheet if available. If not, and if the property inherits by default, inherit the value. Otherwise do nothing.unset
: if the property inherits by default, inherit. Otherwise do nothing.
Download my free CSS Handbook
More css tutorials:
- The Flexbox Guide
- CSS Grid Tutorial
- CSS Variables (Custom Properties)
- Introduction to PostCSS
- The CSS margin property
- How to center an element with CSS
- CSS System Fonts
- How to print your HTML with style
- An introductory guide to CSS Transitions
- A CSS Animations Tutorial
- Introduction to CSS
- The CSS Guide
- How to setup Tailwind with PurgeCSS and PostCSS
- The Tailwind Cheat Sheet
- How to continuously rotate an image using CSS
- Making a table responsive using CSS
- How to debug CSS by bisecting
- CSS Selectors
- CSS Cascade
- CSS Specificity
- CSS Attribute Selectors
- CSS Colors
- CSS Units
- CSS url()
- CSS Typography
- The CSS Box Model
- The CSS position property
- CSS Media Queries and Responsive Design
- CSS Feature Queries
- CSS Transforms
- How to style lists using CSS
- CSS Vendor Prefixes
- CSS Inheritance
- CSS Pseudo Classes
- CSS Pseudo Elements
- Styling HTML Tables with CSS
- The CSS Display property
- The CSS calc() function
- CSS Borders
- Importing a CSS file using @import
- CSS Error Handling
- CSS Filters
- CSS Box Sizing
- CSS Backgrounds
- CSS Comments
- CSS Fonts
- CSS Padding
- The CSS float property and clearing
- CSS Normalizing
- The CSS z-index property
- How to disable text selection using CSS
- How to put an item at the bottom of its container using CSS
- How to invert colors using CSS
- Responsive pre tags in CSS
- Responsive YouTube Video Embeds
- What are good CSS Breakpoint values for Responsive Design?
- How to align center in flexbox