CSS-enabled browsers follow well-defined guidelines for applying style sheets that appear in many places in a document. You may also see conflicting rules being applied to the same element. The cascade guidelines help the browser know which style definition to apply to each element.
At the root of the cascade guidelines is the fact that the more specifically a style sheet rule points to one element among all the elements on the page, the higher the priority that rule has for the element. For example, if you assign a style rule to all p elements on a page in the <style> tag and also assign a further (or conflicting) rule to one p element in its style attribute, any conflicts are settled in favor of the rule within the element's own style attribute. Unconflicting style properties from the more general rule are still applied to the p element (that is, global rules are inherited by an individual element, but an inherited rule can also be overridden with that element).
Browsers that support style sheets have a built-in cascading order of rules that instructs them which style to apply when there are multiple styles for the same element. According to the official specification of cascading style sheets, here is the order of importance:
- Inline styles
- Embedded styles
- Linked styles
- Imported styles
- Default browser styles