CSS Specificity

Inheritance – It is the process by which some CSS properties applied to one tag are passed on to nested tags also called as child tag. When a property has been applied to a particular element, its children retain those property values as well and is called inheritance. But all properties are not inherited but most are.

Style rules – They can be applied from more than one source which usually are

  • The browser’s default look and feel
  • A user-defined style sheet
  • A style sheet created by the website’s developer

Specificity – It determines, which CSS rule is applied by browsers.

  • Specificity is a type of weighting that has a bearing on how cascading style sheet (CSS) rules are displayed.
  • Selector specificity is a process used to determine which rules take precedence in CSS when several rules could be applied to the same element in markup.
  • Every selector has its specificity. All rules in CSS carry a specificity rating regardless of selector type, although the weighting that is given to each selector type varies and will ultimately affect the styling of your web documents.
  • If two selectors apply to the same element, the one with higher specificity wins.

Back to Tutorial

Share this post
[social_warfare]
CSS Cascade
Specificity Hierarchy

Get industry recognized certification – Contact us

keyboard_arrow_up