In which order do CSS stylesheets override?

The order in which CSS styles are applied is determined by several factors. Specifically, CSS style application follows certain rules, commonly referred to as the 'cascade order':

1. Importance: Rules containing !important declarations have the highest priority and override all other rules targeting the same selector. For example, if two rules affect the same element and property, but one includes !important, the rule with !important takes effect.

css
#example {
    color: red !important;  /* This rule overrides the one below */
}
#example {
    color: blue;
}

1. Specificity: If importance is equal, the specificity of the selectors is evaluated. Selector specificity is ranked from highest to lowest: inline styles (e.g., the style attribute of an element), ID selectors, class selectors/pseudo-classes/attribute selectors, and element selectors/pseudo-elements selectors. For combined selectors, specificity is the sum of the specificities of its constituent selectors.

css
/* Specificity example */
h1 { color: red; }            /* Specificity: 1 (element selector) */
.example { color: blue; }     /* Specificity: 10 (class selector) */
#example { color: green; }    /* Specificity: 100 (ID selector) */

In this example, if all selectors target the same <h1> element and none contain !important, the style from #example (green) will override the others.

1. Source Order: If both importance and specificity are equal, the rule defined later in the CSS source overrides the one defined earlier, as it provides the most recent specification.

css
h1 { color: red; }
h1 { color: blue; }  /* This rule appears later, so the text color will be blue */

Understanding these rules is crucial for writing effective and maintainable CSS code. By precisely controlling the order of style application, developers can better manage style sheets and avoid style conflicts.