When styling a page you might wonder how the browser picks which rule to apply. Specificity plays a core role in rule selection. There are other considerations that a browser makes based on origin and importance but I’ll leave that for another post.
Specificity is calculated into a concatenated value created from the selector of a Rule. The concatenated value looks like this.
As you can see from the example inline styles are given the highest specificity and are very hard to override. That is why it is generally a bad idea to use inline styles in your markup.