Conflict Resolution - CONTENT

Resolving conflicts in CSS made simple

Two or more conflicting CSS rules are sometimes applied to the same element. What are the rules in CSS that resolve the question of which style rule will actually be used when a page is rendered by a browser? The answer is, “it’s complicated.” Several factors are involved. I’ll give you a brief explanation of each factor.

Inheritance

Some properties are passed from parent to child. For example, this rule in a style sheet would be inherited by all child elements of the body and make every font on the page display as Georgia.

1. body {font-family: Georgia;}

The Cascade

Within the cascade, more than one factor can figure into determining which one of several conflicting CSS rules will actually be applied. These factors are source order, specificity and importance. Location is part of the cascade, too.

Source order means the order in which rules appear in the style sheet. A rule that appears later in the source order will generally overrule an earlier rule. Consider this example.

1. body {font-family: Georgia;}
2. h1, h2, h3 {font-family: Arial;}

Because the h1, h2, and h3 selectors are in the source order after the body rule, the headings would display in Arial, not in Georgia. There’s also the fact that the selector is picking specific elements.

Specificity

Specificity is determined by a mathematical formula, but common sense can help you understand it.

1. p {font-family: Georgia;}
2. .feature  p {font-family: Arial;}

In this case, the selector .feature p is more specific than the selector p. For any paragraph assigned to the class ‘feature’ the font-family would be Arial. Common sense tells you that selecting a paragraph that belongs to a particular class is a more specific choice than selecting all paragraphs. The more specific selector overrules the less specific selector.

!important

There are rules that are declared !important. !important rules always overrule other rules, no matter what inheritance, source order or specificity might otherwise do. A user created stylesheet can use !important to overrule the author’s CSS.

1. *{font-family: Arial !important;}

This rule would mean that everything (* selects everything) would be Arial no matter what other rules were used in the CSS.

Location

Style rules can exist in a number of locations in relation to the HTML page affected. The location of a rule also plays into determining which rule actually ends up being implemented. The locations are:

1. Browser style rules
2. External style rules
3. Internal style (in the document head) rules
4. Inline style rules
5. Individual user style rules

In the list, the browser style rules are the most “distant” from the HTML page, the individual user styles are the “closest.” Within this cascade of style declarations, the closest rule wins. An inline style overrules an external style, which overrules a browser style.

Related posts:

• The Cascade and Ordering External Stylesheet Links
• The Cascade by Example
• Grouping CSS Selectors
• Calculate the Specificity of CSS Selectors

SOURCE: http://www.webteacher.ws/2010/08/26/resolving-conflicts-in-css/
_______________

CSS: conflict resolution

CSS cascading inevitably leads to conflicts in the way styles are applied to elements. In this case, CSS conflict resolution can be seen under two main aspects: the first aspect is given by the way a browser handles such conflicts using the rules for cascading and specificity, while the second is under the direct control of the author of the style sheet who, in turn, can change his/her style rules to resolve these conflicts.

A typical example can be the situation of multiple CSS classes applied to the same element:

Styles can be cumulative or conflicting. They're cumulative when all rules are different, while they're conflicting when one or more rules specify the same thing. Here's an example of cumulative styles:

Here the computed styles for the body element will be the sum of all the styles specified in the CSS classes because rules are not conflicting. Instead, here's an example of conflicting rules

Conflict resolution in this case is handled by the browser which will apply the rule that tells that when there are conflicting rules and the selectors have the same specificity, then the rule that comes later in the source wins. So in this particular case the font statement of the last rule will win over the preceding one.

Authors, however, can change their style rules to modify this default behavior, for example by incrementing the importance and weight of a statement:

Or using more specific selectors:

Finally, they can combine both techniques:

SOURCE: http://onwebdev.blogspot.com/2011/04/css-conflict-resolution.html

_______________