Priority of Styles

An object on a page may have several, conflicting, rules that apply to it. To know which rules are applied, you need to consider where rules are specified and the type of rule.

Location of Settings

Rules are applied in the order they are given – later rules for the same element/class/id will override earlier rules

  • inline styles override internal styles override external styles
styles.css
p { font-family: "Times;"}
p { font-family: "Arial;" 
    color: orange; 
    text-align: left;}

<style> ... </style>
p { color: red;                       
    text-align: right;}

<body> ... </body>
<p style="text-align: centre;">This paragraph is centered, in red Arial</p>

Element, class or id

The more specific a rule, the higher its priority.

  • id rules override class rules override html element rules
    eg There can be lots of paragraphs, but several of them can be the same class. Only one paragraph can have a given id.
styles.css
p { font-family: "Arial;" 
    color: orange; 
} 

.quotation{
    color: red;
} 

#titlequotation {
   color: gold
}

html
<p>This paragraph will be orange (from p element)</p>
<p class="quotation">This paragraph will red (from class)</p>
<p id="titlequotation">This paragraph will gold (from id)</p>

<p class="quotation" id="titlequotation">This paragraph is gold (id overrules class)</p>
<p class="quotation" id="titlequotation" style="color:green;">This paragraph is green
(inline overrules everything)</p>