1

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?

1
  • What do you want? Do you want to be able to overload all styles with styles in site CSS important file? If yep, so the order is correct.
    – amiry jd
    Commented Dec 22, 2012 at 12:27

2 Answers 2

2

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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.