Example 3: Accommodating User Styles


In the previous example, we showed how the cascading mechanism gives designer style sheets more weight than user style sheets. Some people consider this unfair, so in CSS, we include two alternatives for letting the user's rules prevail:

  • The user can turn off style sheets. The CSS specification recommends that browsers allow the user to selectively turn style sheets on and off. Typically, the opportunity to do this would be offered via a pull-down menu that displays all the available style sheets, thereby allowing the user to pick the one desired.

  • Users can mark rules in their style sheets as "important," thus overriding the designer's rule for the same element.

In the previous example, the designer's style rules were given more weight than the user's. To do the opposite, we change the user's style sheet as follows:

User's style sheet

Designer's style sheet

 BODY {  color: black !important;  background: white !important } 

 BODY {  color: white;  background: black } 


Adding the keyword !important gives a rule added weight. That rule thereafter overrides the designer's rule for the same property and element. After cascading, the document structure looks like what's shown in Figure 13.8.

Figure 13.8. Style properties attached to elements, after cascading and inheritance. This time, the user's rules win.


To keep CSS symmetric, we also allow the designer to mark rules as important. However, the designer's !important does not override the user's !important.

This is a change from CSS level 1. In CSS1, the designer's !important had more weight than the user's, but in CSS2, the weights were reversed to give users with special devices or with disabilities a better chance.


A word of caution: Overriding another style sheet is often much harder than this example indicates. For example, if the designer's style sheet includes color and background rules for the H1 element, the user must also override these rules. To fully override the effect of another style sheet, one must override each and every rule in it. This is difficult to do if you don't know what the incoming style sheet contains.



Cascading Style Sheets(c) Designing for the Web
Cascading Style Sheets: Designing for the Web (3rd Edition)
ISBN: 0321193121
EAN: 2147483647
Year: 2003
Pages: 215

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net