CSS Specificity is the more than one set of the rules applied to CSS selectors in order to determine which style is applied to an element.
CSS style applied by referencing external stylesheet has the lowest precedence and is overridden by Internal and inline CSS.
Internal CSS is overridden by inline CSS.
Inline CSS has the highest priority and overrides all other selectors.
Example:
In this example, the <h2> color will be “red”. because inline CSS has the highest priority than internal and external CSS.
“extenal.css” file
Specificity Hierarchy
Every selector has a position in the Hierarchy. Following are four categories which define the specificity level of a selector:
- Inline style: Inline style has the highest priority.
- Identifiers(ID): ID has the second-highest priority.
- Classes, pseudo-classes and attributes: Classes, pseudo-classes and attributes are come next.
- Elements and pseudo-elements: Elements and pseudo-elements have the lowest priority.
Equal specificity
When two or more selectors have equal specificity, the last(latest) one counts.
Some other rules:
Universal selectors, combinators (>, +, etc.) and negation pseudo-classes :not() have no affect on CSS specificity; the styles defined inside of the :not() pseudo-class do.
Inline styles (styles added to an HTML element) always override any styles declared in an external style sheet; these are generally not good practice as it’s best to define all of your styles in one place.
!important overrides all other defined styles; this is bad practice as it can make debugging CSS much more difficult. When two conflicting styles make use of an !important declaration, the most specific style wins.