In the course of creating a stylesheet, it is quite possible that many different rules will apply to a single element. For example, if one rule applies to all paragraph elements, and another rule applies to all elements which have a CLASS attribute with a value of urgent, which rule should be used? As it happens, both rules will apply to css contact box for myspace and to css rcon plugins. If the different rules contain declarations that deal with different properties, then there is no conflict, and the styles are “pooled together.” However, if different rules have declarations that attempt to set values for the same property, then there are mechanisms to decide which styles will actually be used.

As an example, assume the following three rules:

div#aside h1 {color: red; margin: 0.5em;}
h1.title {color: purple; font-weight: bold; margin-left: 3em;}
h1 {color: gray; font-style: italic;}

Now assume that the document contains an H1 element which is matched by all three rules. How should it be styled? There are three contradictory values given for color, and there may be some conflict between the margin rules as well. As it happens, the answer is that our hypothetical H1 should be colored red, boldfaced, italicized, and have top, right, bottom, and left margins of 0.5em. Thus, the declarations which were overruled were color:purple, color:red, and margin-left:3em.

In determining how to style a document, some declarations may conflict with each other. For example, if two different declarations call for all paragraphs to be either red or blue, which one wins out? This process is described by the cascade. The cascade rules are as follows:

1- Find all declarations that apply to the element and property in question, for the target media type (i.e., do not apply print-media styles if the current media is screen). Declarations apply if the associated selector matches the element in question. Thus, the declaration in the rule h6 {color: navy;} will be used only if the document contains one or more H6 elements.

2-The primary sort of the declarations is done by origin and weight. The origin refers to the source from which the declaration comes: the author’s styles, the user’s styles, or the user agent’s internal styles (hereafter referred to as the default stylesheet). An imported stylesheet has the same origin as the stylesheet that imported it. The weight refers to the importance of the declaration. For normal declarations, author stylesheets override user stylesheets which override the default stylesheet.
For “!important” declarations, user stylesheets override author stylesheets which override the default stylesheet. “!important” declarations override normal declarations. See “Importance” later in the chapter for more details.

3- The secondary sort is 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. See “Specificity Calculation” later in the chapter for more details.

4-Finally, sort by order specified: if two rules have the same weight, origin, and specificity, the latter specified wins. Rules in imported stylesheets are considered to be placed before any rules in the embedded stylesheet.