Before we dig into it, let us first understand in which order the rules are applied. Stylesheet operate in a hierarchy. You must understand the precedence these sheets have over each other. The order of precedence is…

Browser
User
Author
External
Embedded
Inline

Browser: Browser’s default stylesheet.
User: Most browsers let add custom stylesheet to override the default stylesheet.
Author: The creator of the webpage prepares this kind of stylesheet. There are three different ways we can create stylesheet; External, Embedded and Inline.
External: External stylesheet is a file that contains the CSS rules. We attach this stylesheet to documents in order to format our elements in the page.

      <link href="oneColLiqCtr.css" rel="stylesheet" type="text/css" />

Embedded: These styles are placed within the header of the document.

Inline : Inline styles are directly applied to the elements.

     <h1 style="color: red;"> Heading </h1>

Depending on the type of stylesheet, conflict is resolved. Suppose you have two h1 styles in a single page.

     h1{
         color:red;
         }
 
     h1{
         color:blue;
         }

The rule that comes in last has the influence. If these two h1 rules exist in different stylesheets, higher precedence would be given to Author. Author will override User and User will override default stylesheet.

If the rule exists in two different author stylesheets, in that case stylesheet that appears last in the code will have the final say.

Subscribe to the post comments feeds or Leave a trackback