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:
<body class="home event promo"></body>
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:
body.home {
background: #333;
}
body.event {
font: 100% Arial, sans-serif;
color: #fff;
}
body.promo {
border-top: 1em solid #c60;
}
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:
body.home {
background: #333;
}
body.event {
font: 100% Arial, sans-serif;
color: #fff;
}
body.promo {
border-top: 1em solid #c60;
font: 100% Verdana, sans-serif;
}
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:
body.event {
font: 100% Arial, sans-serif !important;
color: #fff;
}
body.promo {
border-top: 1em solid #c60;
font: 100% Verdana, sans-serif;
}
Or using more specific selectors:
html body.event {
font: 100% Arial, sans-serif;
color: #fff;
}
body.promo {
border-top: 1em solid #c60;
font: 100% Verdana, sans-serif;
}
Finally, they can combine both techniques:
html body.event {
font: 100% Arial, sans-serif !important;
color: #fff;
}
body.promo {
border-top: 1em solid #c60;
font: 100% Verdana, sans-serif;
}