Specificity rules

We're beginning to understand how a modular approach to CSS allows us to use classes as little chunks of CSS that can be used anywhere on the web page to style any element. This makes writing CSS very convenient. However, it only works if the CSS is kept lightweight. As you'll learn in this section, every CSS selector can be weighed on a scale, and the heaviest selector wins the style battle between two competing selectors. So, I'll start by explaining the weights of different selectors and how they can overrule one another. Then, we'll talk a bit about how the universal selector and the !important declaration fit into the weights of the selectors.

The weights of different selectors

All...