When learning about CSS and Cascading priorities, the topic of User, Author, and User Agent style sheets becomes a bit confusing for newbies. It is actually a fairly easy topic to grasp. According to w3.org, CSS declarations are applied in this order (from lowest to highest priority):
- user agent
- user normal
- author normal
- author important
- user important
First, what is the difference between user agent, author, and user styles?
User Agent is your browser such as IE or Chrome or Firefox. It has its own default style sheet and has the lowest priority. Author is the maker of the website who embeds all the styles of a website in CSS files or inline into the html. User is you or the end-user viewing a website. You can override the author's styles by defining your own styles or CSS. Typically this is done if you need to have larger font sizes, varying colors, etc. for accessibility reasons.
Now that these three have been defined, what is the difference between normal and important styles?
Normal styles are styles that you define normally. They are processed in a top down methodology. So if you had a background-color:#00ff00; followed by background-color:#000000; for the same element, the black background will have precedence. Important styles are those which override normal styles regardless of where they are on the page. So in the same example, if the style was defined as: background-color:#00ff00 !important; background-color:#000000;, the background color of the element will be yellow even though black was defined afterwards.