11.9 Overriding a Style Sheet Rule

NN 4, IE 4

11.9.1 Problem

You want a single element to adhere to a global style sheet rule except for one or two style properties that are unique to the element.

11.9.2 Solution

There are two common ways to solve this problem. The first calls for creating a style rule with an ID selector tailored to the one element you wish to behave differently. That element can have both class and id attributes assigned to it. The style sheet rule associated with the class selector is applied first, but then the style rule associated with the ID selector can override any style properties needed for this element. An example of style rules and an element that applies those rules follows:

p.narrow {font-size:14pt; margin-left:2em; margin-right:2em}
#narrow_special {margin-left:2.5em; margin-right:2.5em; border:5px ridge red}
...
<p class="narrow" id="narrow_special">...</p>

Another approach is to assign the style properties that are unique to the element to the style attribute within the element's tag. The following shows the equivalent syntax for the previous example:

p.narrow {font-size:14pt; margin-left:2em; margin-right:2em}
...
<p class=narrow 
style="margin-left:2.5em; margin-right:2.5em; border:5px ridge red">
...</p>

11.9.3 Discussion

Cascade-specificity rules give preference to styles that are assigned to an individual element. The one style sheet rule that cannot be overridden is the one assigned to the style attribute within the element's tag. Inheritance rules still apply, however. Therefore, an element with an assigned style attribute still observes other style rules assigned higher up the cascade precedence ladder, unless specifically overridden within the element.

11.9.4 See Also

Recipe 11.1, Recipe 11.2, and Recipe 11.311.3 for basic style sheet rule bindings.