Debugging specificity issues in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is CSS specificity?

CSS specificity is a set of rules browsers use to decide which CSS rule applies when multiple rules target the same element. It works like a score system based on selectors used.

beginner

How do inline styles affect CSS specificity?

Inline styles have the highest specificity and override most other CSS rules except for !important declarations.

intermediate

What is the specificity order from lowest to highest?

Element selectors (e.g., div) < Class selectors (e.g., .class) < ID selectors (e.g., #id) < Inline styles.

intermediate

How can you debug specificity issues in the browser?

Use browser DevTools to inspect the element, check the Styles pane to see which rules apply and which are overridden, and look at the specificity scores or crossed-out styles.

beginner

What does the !important declaration do in CSS?

The !important declaration forces a CSS rule to override other rules regardless of specificity, but it should be used sparingly to avoid confusion.

Which selector has the highest specificity?

A ID selector (#id)

B Class selector (.class)

C Element selector (div)

D Universal selector (*)

ID selectors have higher specificity than class, element, or universal selectors.

What happens if two CSS rules have the same specificity?

A Both rules apply simultaneously

B The rule that appears first in the CSS file applies

C The rule that appears last in the CSS file applies

D The browser randomly picks one

When specificity is equal, the later rule in the CSS file overrides earlier ones.

How can you check which CSS rule is applied to an element?

A Use a text editor

B Guess based on the CSS file order

C Check the HTML source code only

D Use browser DevTools and inspect the element

Browser DevTools show applied and overridden CSS rules for any element.

Which of these increases specificity the most?

A Adding more element selectors

B Adding an ID selector

C Adding more class selectors

D Adding a pseudo-class

ID selectors add more specificity than classes, elements, or pseudo-classes.

What is the effect of !important in CSS?

A It makes a rule override others regardless of specificity

B It lowers the specificity of a rule

C It disables the rule

D It only works on inline styles

!important forces a CSS rule to override others, ignoring normal specificity rules.

Explain how CSS specificity works and why it matters when styling a webpage.

Think about how multiple rules can target the same element.

Describe steps you would take to debug a CSS specificity issue using browser tools.

Use the Styles pane in DevTools to see which rules win.