Have you ever run into the situation where you’re trying to apply a css style to an element, but it won’t take? Your page it seems to be ignoring your CSS, but you can’t figure out why. Maybe you found yourself using !important or adding an inline style as a last resort. There’s a good chance the problem you encountered was one of CSS precedence.
A better understanding of which CSS styles take precedence can lead to less frustration with css, cleaner code, and more organized css so let’s look at three things that control which css rule applies to a given html element…