Location Priorities

In this lesson, we shall explore the nature and usage of location properties.

We'll cover the following

If the winner rule cannot be selected by the highest priority, and even the selectivity of the competing rules does not lead to a decision, the last step uses the priority of the rule’s location to get the winner.

The six key location priorities #

The decision is made by the six location priorities, as listed here from the highest to the lowest:

  1. The first priority location is the <style> element in the head of the HTML document.

  2. The second priority location is a style sheet imported by an @import at-rule embedded within the <style> element

  3. The third priority location is a style sheet attached by a <link> element.

  4. The fourth priority location is a style sheet imported by an @import at-rule embedded within a style sheet attached by a <link> element.

  5. The fifth priority location is a style sheet attached by an end-user. An exception is made for !important rules in an end-user style sheet. These rules are given the highest priority.

  6. And last, the sixth (lowest) priority location is the default style sheet supplied by a browser.

Get hands-on with 1400+ tech skills courses.