Fundamentally, CSS is about declaring rules: Under various conditions, we want certain things to happen.
When declarations conflict, the cascade considers three things to resolve the difference: 1. Stylesheet Origin - Where the styles come from. Your styles are applied in conjunction with the browser’s default styles. 2. Selector Specificity - Which selectors take precedence over which. 3. Source Order - Order in which styles are declared in the stylesheet.
“Flowchart” Conflicting Declarations => Different origin or importance? - Yes: Use declaration with higher-priority origin - No: Move onto the next step =>
Is one an inline style? (Scope) - Yes: Use inline declaration. - No: Move onto next step =>
Do Selectors have different specificity? - Yes: Use declaration with higher specificity. - No: Move onto next step =>
Use declaration that comes later in the source-order.