Pages

Sunday, 22 February 2015

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.

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#containerh3.message{ color: red; }

body#dashboarddiv#containerh3.message{ color: #e06818; }

#containerh3.message{ color: darkblue; }

*body#dashboard > div#containerh3.message{ color: aquamarine; }

#containerh3{ color: fuchsia; }

h3{color:silver}

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

Selector

Inline Style

IDs

Classes, Attributes, and Pseudo-classes

Element Types and Pseudo-elements

body#dashboard div#containerh3.message

0

2

1

3

* body#dashboard > div#containerh3.message

0

2

1

3

#dashboard #containerh3.message

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#containerh3.message{ color: aquamarine; }

HTML

CSS:

Output

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