Introduction to CSS Part I
CSS inheritance refers to how styles are passed down from parent elements to child elements. When a style is applied to a parent element, it is automatically inherited by its child elements unless they have styles that override the inherited styles. For example, consider the following HTML and CSS:
In this example, the
body element has a font-family and font-size style applied to it. These styles will be inherited by all child elements of the
body element, including the two
<p> elements. As a result, both paragraphs will be displayed using Arial font and a font size of 16px.
There are a few nuances associated with inheritance in CSS that a developer should keep in mind:
- Not all styles are inherited. Some styles, such as display, position, and float, are not inherited by default;
- Inheritance can be overridden. As mentioned, child elements can override inherited styles by setting them;
- Inheritance can affect descendant elements. Styles inherited by a parent element are passed down to all its descendants unless a specific style overrides them for the descendant element;
inheritkeyword can be used to inherit a style explicitly. The inherit keyword can specify that an element should inherit a style from its parent element.