There are several style sheets being applied to an HTML document whenever it is accessed by a browser. Cascade refers to the fact that there is a hierarchy that is followed to determine which style is followed. The style rule or sheet that has the highest precedence is the one that is used.
- Browser default settingsĀ are overridden by
- User style settingsĀ are overridden by
- Imported style sheetsĀ are overridden by
- Embedded style sheetsĀ are overridden by
- Inline stylesĀ are overridden by
- Any style marked !important by the authorĀ is overridden by
- Any style marked !important by the reader
There is also a cascade in terms ofĀ specificity: the more specific the CSS selector, the more weight that style has.
Lastly, there is a cascade in terms ofĀ rule order: the last rule for an element is the one that will be used be the browser.
When you add CSS styles, elements pass down text style properties to elements they contain. Just as you inherit certain traits from your parents, HTML elements can inherit properties.
Let me restate that.
First of all, let me take an average html page and draw it out as a chart:
All elements contained within a given element are itsĀ DESCENDANTS. All elements higher than a given element are itsĀ ANCESTORS. Any 2 or more elements contained by the same parent areĀ SIBLINGS.
That means if you apply a text style to the tag, all of its children will inherit that style. The img tag does not inherit the style because it is not and does not contain any live text.
Any property applied directly to an element will override any inherited values. For example, if you style the tag, that style will override any property it could inherit from the tag.
