CSS Style Priority

Order Matters

It matters where you define the rules and in what order they are applied. Styles can be defined in different places and are applied in the following order, with definitions further down the list overwriting previous definitions:

  • the default style of a browser (different browsers have slightly different styles)
  • stylesheet in a separate file (this is what you will be mostly using)
  • stylesheet inside HTML (this can be done for small projects but is not ideal)
  • inline style in an element (this can also be done but should be avoided)

Specifics Matter

“Cascading” means that rules are applied not only to the elements they directly match, but also to all of those elements’ child elements. However, if a child element has multiple, overlapping rules defined for it, the more specific rule takes effect.

Reference & Resources

Reference

MDN CSS Reference: Where you can check and find the css properties.

Resource

Consistency

Because these rules differ sometimes between browsers, there are efforts to promote consistency in styles across browsers. One popular solution to this issue is using what is referred to as a CSS reset such as normalize.css.