It is a common thing for most web beginners to wonder which style will the browser print first when we declare multiple style. Although i have explain previous on the order priority of CSS, i forgotten about the importance of inline, internal and external CSS style that both designers and developers might wonder when they started on web.
Inline CSS
The inline CSS also refer as embedded style is usually mark as the highest priority over internal or external style. An inline style has the highest priority among others but the style can only be apply to an individual element. Here's an example
<div style='height:200px;width:200px;text-align:center;'>Click me!</div>
Inline style may be convenient to write but maintenance work will definitely kill you one day.
External CSS
The external CSS which the style is usually placed on an external file will usually have the lowest priority over these three type.
<link rel="stylesheet" type="text/css" href="http:/hungred.com/external.css">
Nonetheless, sometimes external CSS can have higher priority over the internal CSS in some circumstances.
Internal CSS
Internal CSS are definition declare inside of the HTML document with the style tag,
<style type='text/css'>
div{
height:200px;
width:200px;
text-align:center;
}
</style>
Internal CSS usually have the second highest priority among them. However, it will lose its priority if the external stylesheet declaration is placed at after the internal CSS. Hence,
<link rel="stylesheet" type="text/css" href="http:/hungred.com/external.css">
<style type='text/css'>
div{
height:200px;
width:200px;
text-align:center;
}
</style>
the internal CSS is after the external CSS. Therefore, the internal CSS has a higher priority. On the other hand,
<style type='text/css'>
div{
height:200px;
width:200px;
text-align:center;
}
</style>
<link rel="stylesheet" type="text/css" href="http:/hungred.com/external.css">
when the external CSS is after the internal CSS, the external CSS will have a higher priority.
Priority Sequences
Hence, we can produce a priority sequences of how CSS prioritize our CSS types.
- User Style
- Inline Style (inside HTML tag)
- Internal Style (usually on the HTML head section)
- External Style
- Browser Default Style
User style (the style that user define for your website) have the highest priority over all other types but as a developer or designer we should only worry about the priority given on inline, internal and external style. Nonetheless, it is also important to know that using !important will also mean that user style priority is overwrite by the HIGHEST priority (which is style declare with !important). That is also the reason why we should try to avoid the use of !important as a developer or designer to avoid any usability problem and utilize order priority in CSS.
Summary
Once we understand how order priority work in CSS, we can easily figure out how CSS cascade all our different styles into one. But one last thing to take note of. The order priority in this link only apply to internal and external style. Hence, if both internal and external have the same exact style definition which order priority in this link will CSS take as the highest priority. The answer lays in this article where we explain on the internal CSS section.