User Styles

UserStyles are CascadingStyleSheets that allow for overriding styles specified by the author of a web page. Although specified in the context of the WebAccessibilityInitiative? by the WorldWideWebConsortium, user style are also quite useful for customization.

A problem when using user styles for customization is that on InternetExplorer, user styles are global: they apply to all sites. This will turn some beautiful sites into a complete mess.

FireFox and OperaBrowser both provide ways to apply UserStyles only to specified sites. In Opera, use the Site Preferences feature; in Firefox or Mozilla, surround the CSS you add to the userContent.css file with a "@-moz-document" rule:

 @-moz-document url-prefix(http://c2.com/cgi/wiki) {
    [your css here]
 }

There is another solution: If authors would provide an id similar to their domain name to the body element of each of their pages, one could add specific style rules to his or her user style sheet ...

e.g.: Document Source:

  <body id="c2comwiki"> ... </body>

Personal User Style Sheet could contain:

  body#c2comwiki {color:blue !important; background-color:yellow !important; font-size:16px !important}
  body#c2comwiki p {max-width:65em !important;}

In MicrosoftInternetExplorer, user styles are easy to install. Go to Tools > Internet Options and click the Accessibility button. Check the 'Format my documents using my style sheet' box and browse to find your style file. To toggle the checkbox with a few keystrokes, use the shortcuts in the menus and dialog boxes. For the IE it would be the following keystrokes: Alt-T, Alt-O, Alt-E, Alt-D, Enter, Enter. The shortcuts may vary from version to version and translation to translation.

Using user styles in Mozilla, Netscape, or FireFox is described at http://www.mozilla.org/unix/customizing.html#usercss. The chrome subdirectory mentioned there seems not to be the one found in the program directory of but in the application data subdirectory of the user profile of your operating system. You have to restart the browser to view any effect.

In Opera 9 you can specify a default user style via Preferences > Advanced tab, Content > Style Options. For a specific site, bring up the context menu, 'Edit site preferences' and select it from the Display tab. You can also add items to the style dropdown menu (alongside the bundled ones like 'Debug with outline') by adding them to the 'Local CSS Files' section of your profile's OperaDef6.ini.