How final CSS values are determined - Sources

CSS is an an acronym of Cascading Style Sheets.

The term 'cascading' in CSS, is a reference to how the browser determines the final values to apply to an element. This is because there are often competing values that apply to an element, so the browser must use a predictable cascading process to determine which rules deserve priority.

Here is the order of precedence used by the browser to determine the highest priority:

1) The !important statement

The !important statement instructs the browser that a particular rule is important, and should receive precedence over conflicting rules. In general, it is wise to avoid using !important as it breaks the normal order of precedence.

With !important itself, there are two different types of rules: user and author.

User - these are styles defined by the end-user. When combined with !important, they have a higher priority than !important styles defined by the author (developer) of the website.

Author - these are the styles defined by the author of the website.

2) Author styles - as mentioned above, these are styles defined by the author of the website.

Author styles can themselves contain several levels of ordering. In order of highest to lowest priority, they are:

  1. Inline - styles that are declared inline with the elements.
  2. Internal - styles that are declared in the same document, in the header between <style> tags.
  3. External - styles that declared in external stylesheets.

 

3) User styles - browsers provide users with the ability to use their own stylesheet.

4) Browser default styles - Each browser applies its own default styling to every page it renders. This Stackoverlow page is an excellent resource for exploring this subject further.

 

Stay tuned for part #2, where I'll discuss specificity.