The Cascading order of CSS

Something we use every day but I was unable to correctly describe when asked. So let's try to if we can do it together.

article h1#top {
  color: red;
}

The steps of the cascading algorithm:

1. Relevance
2. Origin
   1. Browser
   2. User
   3. Developer
   4. CSS @Keyframe animations
   5. Developer !important
   6. User !important
   7. Browser !important
   8. CSS transitions
3. Specificity
4. Order of appearance

https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade#cascading_order