In CSS, there's an hierarchy of developing stylesheets: the web-page developer writes a stylesheet, the reader writes another one, and then there's the default stylesheet of the browser. It is known that the order of precedence for the application of the stylesheets are: the developer's, the reader's and the browser's.

It is also known, however, that the reader can override a style assigned by the developer by appending !important to the property declaration:

h1 {
color: white !important;
}

However, what happens if the developer, too, appends !important at the end of their property declaration. Which one takes precedence in this case? Also, does the browser's stylesheet have any !important appended to any property declaration? If it does, how does this effect the style of the web-page?

The book I use for studying HTML and CSS, Head First HTML and CSS, 2nd edition by O'Reilly, tells me there's nothing I can do to override the reader's style (or atleast, that's what I've inferred—it may be that I've misunderstood). I did not try fiddling with the 'reader's' stylesheet simply because I don't know how to do it.

CodePudding user response：

As you have mentioned you are referring Head First HTML and CSS, 2nd edition by O'Reilly, it is important to note it is released in 2012.and over the year !important rules have changed.

I would suggest you go through certian articles.

• As @DBS suggested in the comment,

  If two rules affecting an element both include an !important flag, it should fall back to standard specificity rules, not necessarily the last !important

• Followed by this article

  By default, CSS rules in an author's stylesheet override those in a user's stylesheet. However, to create a balance of power between authors and users, !important rules in a user stylesheet will override !important rules in the author’s stylesheet. This CSS feature is designed for accessibility. Users that need larger fonts, specific color combinations, or other requirements due to disabilities related to vision can maintain control over the presentation of a web page.

Hope it helps!