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.
Priority:
************
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
Example:
*********
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
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.message{ color: aquamarine; }
HTML
CSS:
Output
From this post you can see the difference between the User agent , user and Author styles
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.
Priority:
************
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
Example:
*********
/* 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; }
h3{color:silver}
| Selector | Inline Style | IDs | Classes, Attributes, and Pseudo-classes | Element Types and Pseudo-elements |
|---|---|---|---|---|
body#dashboard div#container | 0 | 2 | 1 | 3 |
* body#dashboard > div#container | 0 | 2 | 1 | 3 |
#dashboard #container | 0 | 2 | 1 | 1 |
#dashboard h3.message | 0 | 1 | 1 | 1 |
#container h3 | 0 | 1 | 0 | 1 |
h3.message | 0 | 0 | 1 | 1 |
| h3 | 0 | 0 | 0 | 1 |
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.message{ color: aquamarine; }
HTML
CSS:
Output
From this post you can see the difference between the User agent , user and Author styles