Inheritance
Last updated
Was this helpful?
Last updated
Was this helpful?
Was this helpful?
๐ SitePoint โฉ CSS Inheritance: An Introduction
inheritance flows down the DOM tree.
use inherit to make inheritance take precedence over the cascaded value.
use inherit to force inheritance of a property not normally inherited, such as border or padding. ๐See:
Every CSS property has an initial (default) value. If you assign initial to that property, then it resets to its default value.
remove a border: border: initial
restore default width: width: initial
property
default value
note
width
auto
display
inline
font-family
font-size
font-style
font-variant
font-weight
font
letter-spacing
line-height
text-align
text-indent
text-transform
white-space
word-spacinglist-style-image
list-style-position
list-style-type
list-style/* control border behavior of tables */
border-collapse
border-spacingazimuth
caption-side
color
cursor
direction
elevation
empty-cells
orphans
pitch-range
pitch
quotes
richness
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
visibility
voice-family
volume
widows/* global link color */
a:link { color: blue; }
/* parent */
.footer {
color: #666;
background-color: #ccc;
padding: 15px 0;
text-align: center;
font-size: 14px;
}
/* child */
.footer a {
color: inherit; /* inherit from parent: #666 */
text-decoration: underline;
}.footer a {
color: initial; /* = `color: black` */
text-decoration: underline;
}