Uninterrupted Combinations
The order of precedence takes effect only when a style at one level in the cascade conflicts with any style at another level of the cascade for the same element.
- Only then will a style at a lower level replace a style at an upper level ~ that is when the styles happen to conflict for the same element.
Otherwise, the styles will flow without interruption in combinations from top to bottom of the casade.
Example:
- Scan through the following styles. See that none of them conflict with each other. Each of them is a different sort of style which is applied to the <p> tag in the mark-up:
External Style Sheet
Document Level Styles
Mark-Up with Attributes
Result
- All of these styles will cascade into the <p> and will be applied to it.
So, the paragraph will be:
- black on white ~ inherited from the body styles in the external style sheet;
- san-serif ~ from the p style in the external style sheet;
- centered ~ from the inline style;
- bold ~ from the class created in the document level styles;
- hidden ~ from the id style created in the document level styles.
- None of the styles will be replaced, because none of them conflict with any other in the cascade in this example. These styles will flow without interruption from top to bottom in the cascade.