GoldShip
GoldShip

Reputation: 139

Why is the user agent style sheet the last one style sheet to be applied?

I've seen an answer that talked about the order of how the styles sheet is applied in a web page.

I'm studying for a certification and I faced this question:

Question:
You are creating an application by using HTML5 and CSS3. The styles for the pages are derived from five style sheets. The styles are not being applied correctly to the pages in the application. You need to determine the order in which the style sheets will be applied by the browser. In which order will the five style sheets be applied? To answer, move the style sheet types from the list of style sheet types to the answer area and arrange them in the order that they will be applied.

user agent style sheets
user normal style sheets
author normal style sheets
author important style sheets
user important style sheets

Answer:

user normal style sheets
author normal style sheets
author important style sheets
user important style sheets
user agent style sheets

Why is "user agent style sheets" the last one to be applied? Isn't it the first one because it is the browser default style sheet?

Upvotes: 2

Views: 2503

Answers (1)

Adil H. Raza
Adil H. Raza

Reputation: 1701

@GoldShip, the answer is here:

http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade

Quote from above link:

6.4.1 Cascading order

To find the value for an element/property combination, user agents must apply the following sorting order:

  1. Find all declarations that apply to the element and property in question, for the target media type. Declarations apply if the associated selector matches the element in question and the target medium matches the media list on all @media rules containing the declaration and on all links on the path through which the style sheet was reached.

  2. Sort according to importance (normal or important) and origin (author, user, or user agent). In ascending order of precedence:

    1. user agent declarations
    2. user normal declarations
    3. author normal declarations
    4. author important declarations
    5. user important declarations
  3. Sort rules with the same importance and origin by specificity of selector: more specific selectors will override more general ones. Pseudo-elements and pseudo-classes are counted as normal elements and classes, respectively.
  4. Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.

Upvotes: 7

Related Questions