CSS Inheritance
Jakob Jenkov |
HTML elements can inherit CSS styles from their parent elements. This is called CSS inheritance. Here is a CSS inheritance example:
<div>
<p>
This text inherits the font-size of the parent div element.
</p>
</div>
<style>
div {
font-family: Aial;
}
</style>
In this example the div element has the font-family property set to Arial.
This CSS property is inherited by the nested p element, so it will also have its CSS property
font-family set to Arial.
HTML elements can inherit styles from more remote ancestors too, and not just from their parents. Look at this example:
<body>
<div>
<p>
This text inherits the font-size of the parent div element.
</p>
</div>
<style>
body {
font-family: Aial;
}
</style>
</body>
In this example the CSS property font-family is set on the body element.
This CSS property is then inherited by the div and p elements.
Not all styles are inherited from a parent or ancestor element. Generally, styles that apply to text are inherited, whereas borders, margins and paddings and similar styles are not.
| Tweet | |
Jakob Jenkov | |
