CODEWITHSUNDEEP
css
Pszemko
Pszemko

Reputation: 125

CSS files applying order

I've got a question about CSS files and it's order of applying in browser. We have:

  1. browser (system) CSS file,
  2. user CSS file,
  3. user CSS important file,
  4. site CSS file,
  5. site CSS important file,

When page is loaded some of CSS code replace other code depending on order or !important word. Is order I listed above correct, so site CSS important file can override all previous styling?

Upvotes: 1

Views: 3436

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201548

CSS code does not replace other CSS code, and the order of parsing style sheets is not relevant. There is really no order of application, since all applicable style sheets are taken into account. When several style sheets assign a value to a property of an element, then the conflict is resolved according to cascade rules. The order is then:

  1. user agent declarations (browser default style)

  2. user normal declarations

  3. author (page) normal declarations

  4. author (page) important declarations

  5. user important declarations

So author (page) !important declarations trump everything but user !important declarations. In Css 1, the order was different, but this was changed in CSS 2 and browsers live by the current rules: the user always has the last word, if he wishes to exercise his rights.

Upvotes: 2

Chris Van Opstal
Chris Van Opstal

Reputation: 37537

No. User CSS files will be parsed after a site CSS files (otherwise it wouldn't make any sense to have a user CSS file). That doesn't mean it will automatically override everything in a website's css file however, normal CSS specificity rules still apply.

Let's make all paragraphs red for an example my website has the rule:

website.css: p { color: red; }

But if I implement a user style sheet (like userContent.css in FireFox) and say:

FireFox userContent.css: p { color: blue; }

The text color would be blue.

If I then mark the website's rule important:

website.css: p { color: red; !important }

The color would be red again.

Upvotes: 0

Related Questions