Specificity in CSS3

When you starts coding in style sheet there are some conflicts, To deal with the conflicts there are rules in cascading style sheet. For example when two properties are applied on a single style sheet then the property with more weight will be determined.

If this problem occurs in applying some rules which are overridden, To deal with this problem !important property is used. An example with source code is given below.Hope you will enjoy it.

Example of !important property


<style type="text/css">
 h5 { color: red !important ; }
 h5 { color: blue; }
 h5 { color: green; }
</style>
<h5> Heading for example </h5>

Output of above code

Heading for example.


Style Sheet Hierarchy

There are some source from which styles formations come.
A complete list is given below.


  • Some browser's by-default settings
  • Some styles settings by user.
  • Some styles by external style sheet.
  • Some styles by imported style sheet.
  • Some styles by embedded style sheet.
  • Some styles by inline styling
  • Some style rule which is marked as !important by the author
  • Some style rule which is marked as !important by the reader (user)

An example of Rule order


<style type="text/css">
  h5 { color: red; border: 2px solid red; padding: 5px; }
  h5 { color: blue; border: 2px solid blue; padding: 5px; }
  h5 { color: green; border: 2px solid green; padding: 5px; }
</style>
<h5> Heading for example </h5>

Output of above code

Heading for example.








The Best

Comment here

If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.