Imagine you’re working on the CSS stylesheet for a webpage, and you decide to make all the links have purple text. You add a CSS ruleset to do it and it looks great. Then you take a break, but when you come back, you forget about the change you made, so you add an additional ruleset that changes links to have green text. You’ve now told your browser to do two conflicting things, so what should it do?
As you add more and more CSS to a stylesheet, you will inevitably run into conflicts like that. Fortunately, three fundamental concepts can help you understand how a browser decides what to do in such situations: cascading, specificity, and inheritance.
