How is CSS specificity calculated, and why does it matter?

How is CSS specificity calculated, and why does it matter?

• A. Specificity is calculated by a, b, c, d values (inline, IDs, classes/attributes, elements); higher specificity overrides.
• B. Specificity depends only on the order of styles in the CSS file.
• C. Specificity is irrelevant for most pages.
• D. Inline styles have the lowest specificity.

Answer: (A)

CSS specificity is the rule-basis browsers use to decide which style wins when several could apply to the same element. It’s calculated as a four-part value: a = whether the style is inline (1 if inline, 0 otherwise); b = how many ID selectors appear in the selector; c = how many class selectors, attribute selectors, and pseudo-classes appear; d = how many element names and pseudo-elements appear. When comparing two rules, you first compare a; a higher number wins. If a is the same, you compare b, then c, then d. If all four parts match, the rule that appears later in the CSS cascade wins. Inline styles have the highest specificity because a is 1, so they outrank any external stylesheet rules unless those have something with higher specificity or the rule uses !important. A class selector is more specific than an element selector but less than an ID selector. This matters because it gives you predictable control: you can override general styles by using more specific selectors, while keeping global styles clean and modular. The idea isn’t about order alone, and inline styles aren’t the lowest—inline styles are the most specific.