Sunday, 22 February 2015

Difference between the User Agent Style , User Style and Author style in CSS

The CSS cascade style sheet which is used to set the style for the element in the Webpage. It various depends upon the browser. Each individual browser have there own styles to define for the element tags.Then the person who design the website can also give the style , finally the end user.

According to the Web standard CSS declarations are applied in the order of lowest to highest priority.

1. User agent
2. User normal
3. Author normal
4. Author important
5. User Important

Difference between the user agent , user and author styles ?

User Agent is a style which is define by your own browser like IE, chrome, Firefox which has the lowest priority, Each individual browser have own set of style define for the individual tags.

Author is the creator of the webpage , who design the styles for the website in a CSS or in inline.

User is the end user who viewing the web page as  a client in  browser, i.e you,  you can override the author styles by defining your style in CSS.

In the Author and User we can see that normal and Important style, then what is difference in that ?

If we define a style for an element for two times as below as normal

1. color: blue;

2. color:black;

Now the color of the element is black because the precedence goes to the latest declarations.
By a chance if you give a importance for a color in the first declaration ,

1. color:blue !important;
2. color:black;

Then now the color of the element will be blue, because important is specified in the first color.
In the normal style it follows the top-down approach to apply the styles.

There is a chance that many styles can be defined for an element in many ways by specifying with parent element, id selector, or class names path iteration to apply the styles, but if more than one style is present  in the CSS then it is prioritized based on the order which have highest priority, if the two declarations have the same priority then style which is present last in the style sheet

Let we take an example styles and there priority:
Normally a style is defined for a element based on selectors, then the style are ordered based on priority , then applied by last declarations


        /* check for the priority of Styles applying for a same element */
        h3.message{ color: green; }
        #dashboard #container h3.message{ color: red; }
        body#dashboard div#container h3.message{ color: #e06818; }
        #container h3.message{ color: darkblue; }
        * body#dashboard div#container h3.message{ color: aquamarine; }
        #container h3{ color: fuchsia; }

Style is priority based on number of ID's, classes , attributes and pseudo present in that style definition, and thses summation of number will give the order of priority

Selector Specificity priority
SelectorInline StyleIDsClasses, Attributes, and Pseudo-classesElement Types and Pseudo-elements
body#dashboard div#container
* body#dashboard > div#container
#dashboard #container
#dashboard h3.message0111
#container h30101

From above style you can see Two styles are in same priority but one style is applied based on the style which is declared last in the stylesheet. so the style is applied to the element.

* body#dashboard div#container h3.messagecoloraquamarine; }




From this post you can see the difference between the User agent , user and Author styles