HTML Help: Comment Out JavaScript

For example, you may have a linked style sheet coded to display all <h1> tags in red text. On your page, you may have coded an <h1> tag to be displayed in blue text.

A browser needs a way to determine which of the conflicting rules takes precedence. Thus, cascading styles is the conflict resolution mechanism. That simply means that there is a hierarchical order to determine which of the conflicting rules will be used to display the page element in conflict.

The order of importance is:

1. ! important
   This can be added to any style rule, and nothing will override it except when a user makes the same rule "important" in his or her own style sheet. In that case, the user's preference rules. An example of usage:

   h3 {color: red ! important} 
   

   Note that there should be a space between the property value (red) and the exclamation mark, and between the exclamation mark and the word "important."
2. Origin of Rules
   Both the web page author and the web page reader can specify style sheets. A reader may have poor vision, so creates a style sheet that renders text larger than normal. When rules between author and reader conflict, the author's rule will win over the reader's rule of equal weight (unless, as mentioned previously, if the reader makes a rule important, it will override the author's rule every time).
3. Inline Styles
   Inline styles win out over embedded and external styles.
4. Embedded Styles
   Embedded styles win out over external styles.
5. External Styles
   External styles are wimps, they only come out to play when no other styles challenge them. :o)
6. Specificity
   If the previous conflict resolution hierarchy hasn't yet solved the problem, conflicting styles can be resolved based on specificity. The more specific style wins out over a less specific one.
7. Order of Specification
   As a last resort, when all other conflict resolution specifications cannot determine which style should take precedence, the last style specified will be used.