CSS Specificity

CSS specificity is the set of rules browsers use to determine which CSS style is applied when multiple rules target the same element. The rule with the higher specificity value takes priority.

• Inline styles have the highest specificity.
• ID selectors override class, attribute, and element selectors.
• Class selectors override element and pseudo-element selectors.
• When specificity is equal, the rule written last is applied.

CSS Specificity Rules 

1. Inline CSS

• Inline CSS applied directly to an HTML element using the style attribute.
• Has the highest specificity and overrides both internal and external CSS rules.

2. Internal CSS

• Internal stylesheets defines inside the <style> tag within an HTML document.
• Specificity depends on the selector used (ID > class > element).
• Overrides external CSS when selectors have the same specificity.

3. External CSS

• External CSS Written in a separate .css file and linked using the <link> tag.
• Used to style multiple pages consistently.
• Specificity depends on the selectors used and is lower than inline and internal CSS.

Note: 

• The Specificity is mainly determined by the Selectors themselves, rather than whether the styles are defined internally within a <style> tag or externally in a separate CSS file, in the case of specificity for external or internal CSS rules. 
• If the selectors used in External and Internal CSS contain the same components, then their specificity will be the same, and it will not be affected by the location of the CSS rule.
• If any conflict exists for the styles of the same element, then the styles will be implemented based on the order of inclusion in the HTML document.
• When two or more selectors have equal specificity, then the last(latest) one counts.
• Universal selectors (like body and inherited selectors) have the least specificity.

Specificity Hierarchy

Every Selector has a position in the Hierarchy, which is described below:

Example: