Appendix: User style sheets



They work relative well at least in MS IE 5.x+ and Opera 4.x+. How they are used and what is the effect of the user style sheets to the presentation of documents is browser dependent.

Why user style sheets?

They have at least following productive usages:

  • If you meet sites, which you have difficulties to read you can change the layout of the web pages much easier for you to read. You can for example use bigger fonts, other font face and different text and background colors.
  • If you use Opera 4.x+ you can set the width of the page according to you own needs. You can for example use the same basic layout, which I have used in this page. The style of this page is useful, if you browse to a page, where the text flows from left to right. Especially with Opera 5.x+ user style sheets are very useful.
  • In most cases they increase the speed of browsing. If you just want to search some information from the Internet, I recommend to use user style sheets.
  • Pages are easy to test
    • It is easy to test different presentation models. You can send them to the customer of the site or inform about the users of the site the possibility to change the presentation with them.
    • It is possible to test partial pages without sending them to a server-application.

Note. If you define the screen media (@media screen), remember to define also the media type for the full screen mode[S]. Use for it its own media type (@media projection or define it together with the normal screen media (@media screen, projection).

Try my userCss.css file for example going to the CSS2 specification site with my CSS (the link opens a new window).
Note. This CSS-file removes the meaning of all FONT elements and all text and background colors, which the author has defined! This is necessary in order to avoid situations, where text colors and background colors are the same or very close to each others. This file is optimized to Opera 5.x+ because the meaning of this css is the control the width of the textual content.

In those browsers, which I have tested, the CSS can control the width of the page only in Opera 4.x+ and Netscape 6.x+. Indeed the CSS-file doesn't force wide tables to fit to the maximum width, which I have set (body {max-width:600px}). It is not reasonable to force the width of tables to certain maximum value, because the content of tables might overlap each others and the content is unreadable.

The usage and deficiencies

In MS IE 4.01 and Opera 3.x they don't work well. The most irritating is that the font-family property doesn't work properly.

The change of preferences

In all browser, which allow to define user style sheets, it is in the first time define the path of the CSS-file (you need to do this however only once, if you don't want to change the file).

In MS IE the usage is a little bit troublesome, because the user must browse through multi-level submenus: Tools > Internet options > Acessibility.

The defining of basic preferences is also in Opera a little bit troublesome: File > Preferences > Documents (indeed the change is easier, if you use both the keyboard and mouse: ALT + P > Documents - next time this dialog is ready open and the resetting of original settings is fast). You get finally a dialog, where you must define with check boxes, how to use document and user style sheets.

Next times in Opera to change between user and author style sheets is extremely easy, because in the progress bar is a button to change between document and user mode.

Note 1. If the the style sheet control is changed by the option Document mode as default, the user must push Apply, if he wants that the effect works immediately - otherwise the change takes the effect, when the user opens a page into a new window.

Note 2. According to an e-mail, also to MS IE can add a button by using a development kit to take off/ put on user style sheets. Today it is also possible to customize Opera.

Opera Software: Opera Composer lets users customize their Web browser; Microsoft: Internet Explorer Administration Kit.

I don't find from Netscape 6.0 and Mozilla 0.7 browsers any option to set user style sheets. In practise the functionality of user style sheets can create by editing CSS-files, which browsers itself use (lähinnä html.css and ua.css files in the sub-folder /res - original files are reasonable to save with another names). I hope, that also these browsers could have easy to use user style sheets.

Indeed Netscape/Mozilla gives the possibility to change style sheets (View > Use Stylesheet), which MS IE and Opera don't allow. According to W3C user agents should support both user and alternate style sheets. The functionality of them needs using the title attribute (for example <LINK rel="alternate stylesheet" title="Alternate SS"<).

HTML 4.01: 14.3.1 Preferred and alternate style sheets.

Unsupported features

Even if user style sheets work quite well in Opera 4.x+, they don't work however as well as author's style sheets. Following matters don't work in Opera 4.x+:

  • background-image.
  • list-style-image.
  • @media print and overall CSS for printing.
  • @media projection doesn't work in Opera 6.0 (it works in at least in the 5.x series browsers).

In MS IE 5.5 list-style-image and background-image properties work, but the @media and @page at-rules crashes it (MS IE 6.0 doesn't crash using of them). Printing can't be controlled with the user CSS in MS IE 5.5. In MS IE can't take off the document CSS (like in Opera) in order to use only the user CSS.

Because the user style sheets is a intended to be a single style sheet, the import rule (@import) doesn't work. This might be also a bug.


The so-called important rule (!important look at the page Processing order[S]) has not in practise much meaning. In MS IE it is possible to control with the browser preferences (roughly) fonts and colors, but other properties might need it (for example ul li {list-style-image: url(ball.gif) !important;} sets more weight to the user defined list style images as the author's defined list style images). MS IE seems to follow CSS2 and user's important rules have more weight than author's defined important rules.

At least until the version 5.01 Opera browsers seem to follow CSS1, when author's style sheets has more weight than user's style sheets (this is not however so important, because in Opera it is possible just take off all document CSS). In my tests Opera 5.12 gives higher priority to the import rule of the users style sheets and Opera 6.01 to the document CSS. Only the Opera 5.1x series seems to work in this matter according to the CSS2.