CSS which takes precedence, inline or the class?

There is no 3.Internal or 4.External precedence. Whichever stylesheet comes last in the html page which will get the precedence. Eg. 

<style></style>
<link> </link> <!-- Precedence -->


<link> </link> 
<style></style> <!-- Precedence -->

Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number three has the highest priority:

  1. Browser default
  2. Embedded and external stylesheets. Later has precedence over earlier. There IS NOT any inherent difference between embedded and external.
  3. Inline style (inside an HTML element)

Source (Edit: of original incorrect information, since corrected both here and there): w3schools

W3schools explains a lot about CSS and also goes through and shows examples of most things you can do with CSS. Always a good resource if you have questions about something. (Edit: debatable, they were the source of the original wrong answer.)


The order of precedence with CSS is as follows:

  1. Inline, such as <div id="orange" class="green" style="color: red;">This is red</div>.In this example, the class is ignored if the green class declaration has already tried to define the property of color.Also id is also ignored if it has tried to define the color.
  2. Id Selector , such as #orange { color: orange; }
  3. Class Selectors , such as .green { color: green; }
  4. Element Selectors ,such as div { color: black; }

Mozilla Developer Network Documentation Has Well Written Documentation on That Which Says

When multiple rules apply to a certain element, the rule chosen depends on its style specificity. Inline style (in HTML style attributes) has the highest specificity and will override any selectors, followed by ID selectors, then class selectors, and eventually element selectors.

The text color of the below will therefore be red. 

  div { color: black; }
   #orange { color: orange; }
   .green { color: green; }
  
 
<div id="orange" class="green" style="color: red;">This is red</div>

Please Consult MDN for any HTML, CSS or JavaScript Knowledge, w3school does not have a very good reputation in developers community. For Further Info On This Matter Please Visit w3fools.


The order of precedence with CSS is as follows:

  1. !important (this is a bit hackish though but it is the only way to override an inline style. Try to avoid using this unless really necessary). Example: p {color: blue !important; }
  2. Inline, such as <p class="redText" style="color: red;">CSS is awesome</p>.In this example, the class is ignored if the redText class declaration has already tried to define the property of color:. Other properties can still be honored though.
  3. Internal styles - those written inside the <head><style> section of an html page.
  4. External stylesheet which defines styles. Your html document must have a link to this sheet in order to use it. Example, again inside the <head> section is: <link rel="stylesheet" type="text/css" href="mystyle.css" />

Check here to brush up on the terminology: http://www.w3schools.com/css/css_syntax.asp

Tags:

Css

Recent Posts