The Importance of Location

With so many ways to apply styles, it's not unusual for more than one style rule to apply to the same element. As we discussed in Chapter 7, Style Sheet Building Blocks, and specifically on pages 122123, a style's location can break a tie in the contest between inheritance and specificity. The basic rule is, with all else equal, the later the style appears, the more precedence or importance it has.

Figure 8.21. In this example, the style element comes last. Therefore, its rules will have precedence over the rules in the base.css style sheet (as long as the conflicting rules have the same inheritance and specificity factors).

So, locally applied styles (see page 134) have the most precedence and will override any conflicting styles applied earlier.

In a style element, any @import rules present will lose out to any individual style rules that also appear in the style element (since these must follow the @import rules, by definition).

Figure 8.22. The style element's dashed border wins out over the linked solid border.

The relationship between the style element and any linked external style sheets depends on their relative positions. If the link element comes later in the (X)HTML code, it overrides the style element. If it comes earlier, the style element (and any imported style sheets it contains) overrides the rules in the linked style sheet.

Figure 8.23. Here, the linked style sheet comes last and has precedence over rules in the style element (all else being equal).

External style sheets can also contain @import rules. In that case, the imported rules are overridden by the other rules contained in the external style sheet (since, by definition, they must follow the @import rule). Their relationship with the document's other style sheets is determined by the position of the link to the external style sheet, as usual.

Figure 8.24. The solid border from the base.css style sheet wins out over the internal style element's dashed border.