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.
