Inheritance:
Another crucial idea and concept in CSS is that of “inheritance.”
Inheritance allows rules for certain aspects that are defined in parent elements to apply to all children elements.
For example, defining the text color and font family in the all selector (* {}) or HTML element selector (html {}), will define a base text color and font for the entire page (or until another more specific rule overwrites it).
A Heading, that is pink and without serifs.
Some Text, that is also pink and without serifs.
You should not nest paragraphs in other paragraphs.
But notice how the text color and font apply to all sub-children.
Another heading, so forth and so on.
A more Specific Selector can overwrite this paragraph.
What Inherits
Not all properties will inherent their value from the parent element.
Text properties tend to inherit values from their parents, however, some properties do not. As with many things in web development, this is partly browser specific.
Forcing Inheritance
If you are worried, or find a property that is not inheriting, you can for inheritance with the inherit keyword as the properties value.
Notice that the black background color only applies to the outer <div> element. Not the child paragraph elements.
Yet, the text color applies all...
{ TODO: }
- Read pages 240-245 of Chapter 10 in Duckett.
- Skim information on Inheritance and Cascading from w3.org.