When learning about CSS and Cascading priorities, the topic of User, Author, and User Agent style sheets becomes a bit confusing for newbies and most of the front-end developers. 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.
Remove your confusion –
Author – The person who defined the styles in the CSS file or added inline styles to the HTML. Could also be called the front-end developer who designed/styled the page.
User – The person/customer aka End User who will be using the page. They don’t mess around with the CSS manually, but through accessibility options may have font sizes increased.
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:#ffffff; 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:#ffffff !important; background-color:#000000;, the background color of the element will be white even though black was defined afterwards.