Hello, my name is: Amy

The 'C' in CSS stands for Cascading. How is priority determined in assigning styles (a few examples)? How can you use this system to your advantage?

The cascading system in CSS is a set of rules that define which property is to be used if one element has the same property assigned in different places.

Assemble the order

To evaluate which property wins in a match up, first all of the stylesheets and styles for a web page should be assembled in weight order. In addition to any stylesheets and in-line styles the developer includes, this list also includes any user-agent stylesheets (defaults provided by the browser) and any specific styles that the user may have selected .

(In order of highest importance: )

  1. User Opted Styles (E.g. those who are visually impaired may opt for font sizes to be larger)
  2. Developer Added Stylesheets/Styles (Ordered by location in document. Lowest Position takes priority.)
    1. In line Styles (<p style="color:blue"></p>)
    2. In Style tag <style>p{color:blue;}</style>
    3. Stylesheets (Lowest position in document is priority)
      <!DOCTYPE html>
        <style> <!-- 2nd Priority, styles w/in style tag -->
          p { color: purple;}
        <link rel="stylesheet" href="styles1.css">  <!-- 4th Priority, 'Highest' stylesheet -->
        <link rel="stylesheet" href="styles2.css"> <!-- 3rd Priority, Bottom most stylesheet -->
        <p style="color: blue;">Words.</p>  <!-- 1st Priority, in-line attributes -->
  3. User Agent (Browser)

Selector vs. Selector match up

Once the styles are properly lines up, next step is to evaluate which one wins. If all else is equal, the style that is closest to the bottom of the list would win.

p { color: green; }
* lots of other things
p { color: deeppink; } /* deeppink wins! */

It is often the case though, that all things are not equal, in which case you have to turn to specificity.

p.fancy { color: green; }  /* green wins! */
* lots of other things
p { color: deeppink; }

When trying to sort out which property is being used, the below factors are ranked with the greatest weight in consideration first.

  1. Presence of !important (importance) - If multiple !importants are present, the !important of the same or greater specificity that appears the latest in the source order wins. (also, try not to use !important)
  2. Specificity
    1. Style element or attribute
    2. ID selector
    3. Class Selector
    4. Generic Element
  3. If importance and specificity are equal, the order in the css document (as details above) breaks the tie.

Specificity: Guess no more

Until doing this deep dive, I never really realized that there is actually a formula you can follow when calculating specificity to see which selector would win. If you look at the MDN page for Cascade and Inheritance you will find a table that allows you to actually calculate what weight a combination of selectors has and give it a score. Highest score wins!

  • +1000 if the matching selector is inside a <style> element or the declaration is inside a style attribute
  • +100 for each ID selector
  • +10 for each class selector, attribute selector, or pseudo-class
  • +1 for each element selector or pseudo-element

Some examples:

p {}              /*    1 */
.fancy {}         /*   10 */
p.fancy{}         /*   11 */
#super-fancy p {} /*  101 */

Cascade++ (Inheritance)

One other element to the cascade is the idea of inheritance, where certain properties (E.g. font-size, color, etc.) are able to inherit values from their parents.

So, if a font-size has been declared for the body, a p element will naturally inherit that font-size (unless it has it's own font-size declared).

Cascade for the win!

Using the cascade can really help you as it allows for you to apply styles generally to components, and then, in the rare ;) case that one of the items will need to be different you can easily override those set styles without having to rethink the whole plan.