Style rules take increasing priority as they grow closer to the element they are influencing: that is, in the case of a rule conflict, the rules for an inline style will trump those of an embedded style, and embedded style rules will be used over a linked style rule.

Style rules are synergistic if they do not conflict: a rule written in a linked style sheet will join with embedded and inline rules for the same element to create an appearance that is the result of combining the rules.

All other things being equal, a conflicting rule between an id and a class will resolve by favouring the rule in the id.

Enjoy this piece? I invite you to follow me at to learn more.