Adding User Styles

tyles can be added to some browsers with a so-called user style-sheet, and Microsoft Internet Explorer has permitted their addition for a number of years. Despite this lengthy period of time, there have been few additions to the help files on the subject. While the notes show how to add a user style-sheet, nothing is done supply one for use. By now, there should be a very large list of accessibility and other user style-sheets available to users. Alas, this is not so.. With this mind, these notes explain what is involved and lists a starting style-sheet to use for customizing the user view.

The CSS Styles Cascade

A web-page consists of text but also contains markers called element-tags, or just tags, to tell the browser how each part of the page is to be styled. The browser works its way through all of these tags and uses them to find styles that might apply to them. Typical tags include, for example, paragraph tags <p> for every individual paragraph, division tags <div> to make box-shapes, and even tags for tables <tables>. There are hundreds of tags on each web-page and dozens of different types available for an author to use.
The styles used to format the page's elements can be found in several places. They include both those within the HTML document itself and in the various style sheets; the default styles of the browser and other option settings can also apply. At times, these sources appear to exist in a simple hierarchy, however, it is soon apparent that a more complex arrangement applies. See the adjacent graphic for a depiction of the cascade as it applies to practical cases. The function of the cascade is to resolve the various competing style declarations to a point where a format can be decided for a particular tag. When a user intends a style to be applied from his own style sheet, he will at times find that a different one has been applied. At such times he will need to know a little more than usual to resolve the matter.

Figure

1. A CSS styles cascade. Notice that the user's style declarations have

the highest precedence provided that they carry an !Important marking.

The decision-making process groups the style sources into three main categories, or origins; author style declarations, user declarations, and default style declarations. Author declarations, in turn are comprised of in-line styles, document head styles, and linked style-sheets. Since CSS2, users have been able to gain a position of highest priority for their own style-sheet declarations, using the !Important keyword, and the introduction of this marking was accompanied by a rearrangement of their precedence. The main groupings at present are simply:

The user's !Important style declarations. These style expressions consist of all user style-sheet entries with the !Important keyword appended to them.
The author's !Important style declarations. The three style sources attributable to the author are in the first instance treated as a single group. These are; in-line styles, document head styles, and linked style-sheets. Again, this set consists only of those declarations where the !Important keyword is added.
The author's Normal style declarations. Those in the author's set without an !Important marking.
The user's Normal style declarations. Those in the user style-sheet without an !Important marking.
The Browser default styles. Styles in the User Agent (UA) Style Sheet ^[1] and the selectable default settings of the browser..

In the above hierarchy, the user's styles with the !Important keyword marking are given the highest priority of all, and the choice of styles will only revert to a lower level if the user's style-sheet has neglected to make an appropriate style entry, or neglected to mark it as !Important. A similar reasoning applies throughout all of the levels, for every tag's styles. In deciding which styles to apply, the browser also takes into account the specificity of each declaration. Specificity is the extent to which a declaration can be said to apply directly to a particular tag. Within each of the main levels, the browser sorts the styles for specificity, assigning a numerical value to each in order to decide which of the many has priority. A more specific style has priority over one that is more general. The higher the number, the higher the specificity and its priority. It is the style with highest specificity within a given level that represents it in the cascade hierarchy, but having a higher specificity alone does not permit the style to impose its styles beyond its level.
In deciding specificity, the browser considers several factors that apply to the style declaration; that is, the style-sheet entry that defines the style; it counts the id's, classes, tags, pseudo-classes, attributes, and pseudo-elements. Another way to think of the !Important marking is to treat it as an extremely high specificity value, one that exceeds others by say, a factor of ten. A detailed description of specificity and the cascade can be found at W3:The Cascade , and a simple method to use in estimating it, with worked examples, is also given in the sections below.

There is a further point that needs explained. The way that the user sets his options for the browser can modify how the cascade works; for example, the user can elect to ignore certain author styles altogether. Because the user's style sheet has a comparatively low priority in the cascade, there will be many times when their user-styles cannot assert themselves. (See the adjacent graphic). To overcome this situation (for the fonts), the browser options allow the user to artificially override some of the author's style settings.

Author Styles Override

Without even making your user style-sheet, there are a number of author styles that can be changed with settings in the browser's options. Note that the styles given by the author are the in-line styles, the head styles, and the linked external style-sheets. Not all styles can be over-ridden, but some quite fundamental ones can. These are:

Author's page colors. Selecting this removes all of the author's page colors including font-color.
Author's font styles. Selecting this removes all of the author's font-family choices.
Author's font sizes. Selecting this removes all of the author's font-size choices, both absolute and relative.

Each or all of the items on the above list can be selected or deselected to suit the user's intentions, and can also be used in conjunction with a user style-sheet. To set the override features proceed as follows:

Open the Tools > Internet Options dialog.
On the General tab select Accessibility.
On the Formatting section select or deselect the necessary check boxes.
Decide whether the user style sheet or the default styles of the browser are to be used to replace the overridden styles, and select or deselect the box marked Format documents using my style sheet accordingly. If the user style-sheet is not selected for use, then the default colors, fonts, and sizes will replace them, otherwise the user style-sheet will be considered.

userstyles