Internet Explorer/Adding User Styles

Page Under Construction - 30 Dec 2010

S

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 ^[2], 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.

User Style Sheets for Internet Explorer

A style sheet is essentially a text file. It differs in that it has a different file suffix. Instead of a .txt at the end, it has .css, short for cascading style sheet. Like other text files, it is made in a text editor, such as Notepad, Wordpad, or any other plain text editor. There are free text editors offered on the internet that also help you to write css code, and these can be useful, however, this description assumes the simplest case.

Make a blank CSS File

Assume in the simplest case that Notepad is used to write your style sheet manually. Open Notepad then proceed as follows:

Select the Save As entry of Notepad's File Menu. The Save As dialog opens.
If necessary, change the directory to your Documents folder.
In the Save As dialog, change the Save as type: selector to All Files (*.*).
In the File name text box type the name of your file with a .css ending. For example, Mystyles.css.
Press Save.

The style sheet does not yet contain any entries, but work can be done on it at any time by opening the file in Notepad.

Open a CSS File

Open Windows Explorer
Locate the CSS file
Right-click the file.
Select Open with... then Notepad. (If necessary, browse for it.)
The file opens for use.

Install the Style Sheet

When the style sheet has been named it can be added to the styles cascade. The style sheet needs to be enabled with a tick box for it to take effect, so it can be installed and left in place with the box unchecked. Proceed as follows:

Open the Tools > Internet Options dialog.
On the General tab select Accessibility.
On the User style sheet section, select the box marked Format documents using my style sheet.
Press Browse and locate your style sheet.
Left click your file then press Open to install it.
If you do not intend to use the style sheet now, then deselect the box marked Format documents using my style sheet.

If de-selected, the style sheet address remains in place for use when it is needed.

Before viewing the effect of a newly installed style sheet, or changes to an existing one, the browser must be restarted.

Write the Styles

Style declarations are collections of properties and their values. For example, the following style-rule for a paragraph consists of several individual parts that collectively describe its formats.

p { font-family: Arial; font-size: 2em; line-height: 1.5em; padding: 0.5em;} 

It consists of four style rules. They are for the font, font-size, line spacing, and the all-round padding of the paragraph, in that order. There are some basic points to note:

The style starts with the text of the tag that is being styled, (less its brackets). This text is called the Selector, because the browser uses this entry to select the correct styles from the style sheets. A look at the source code for this web-page will show the many tags and selectors that it contains. (Select View > Source, then minimize the window if necessary, to find the source screen behind this).
The above code could be used to format paragraphs within the body content of the page. However, if paragraph tags were nested within other tags on the web-page, for example within a <div>, this declaration would be ignored. The styles would need a term added to allow for nesting.
Notice in the example that each rule consists of a CSS property and its value, separated from it with a full colon. The rules are separated from one-another by semi-colons, and if desired, an additional semi-colon can be added at the end. The whole expression is enclosed in curly brackets. Generally, spaces are permitted, but no space is permitted before a colon or semi-colon.
If the above text (without !Important modifiers) were typed into the user's CSS file, then saved, it would function as an elementary style sheet, and after a browser restart, might produce text of about 32 pixels in height. However, if sources with higher status than the user's specified the paragraph also, then the user's items would be superseded by them and they would have no effect. Similar ideas apply throughout the subject of style declaration.
See the practical style-sheet in the next section for examples of the !modified rules and the drop-boxes below for an introduction to style-sheet terminology and specificity estimation.

Tutorials

An introduction to style sheet terminology is given below; it is concerned here with the types of selectors found in style sheets. Other material includes a panel on estimating specificity, and an example that shows the interactions of the cascade in resolving styles.

Introduction to Style-sheet Terminology

Common Style-sheet Terminology

Tag Selectors: In general, a selector is the left-most part of a style expression, up to but not including the first curly bracket. It is sometimes just the text-part of the HTML tag whose style is being defined. It can also be compounded with other terms too, and a few examples of the most common tag selectors is given here. A simple style with a paragraph tag's selector looks like this:

p {font-size: 10pt;}

and the above style could be applied automatically to all simple paragraphs on a web-page. Sometimes the selectors are grouped to save typing; then the same styles can be made to apply to the entire comma-separated group, like this:

p, div, table, ul {padding: 1em} 

When we intend to write declarations for every tag on the page, we can use the universal selector, the asterisk, like this:

* {font-family; Arial, Sans-serif}

We can also conditionally style paragraphs. Say that the styles must only apply when the paragraph tags are nested within div tags, we can write:

div p {line-height:1.8em;}

Class Selectors: A class-selector is a selector that is allied with a class. That is, the class name must be declared within the associated tag in the document for the styles to apply. It has more specificity than a simple selector, but less than an ID selector. The class can be used as many times as necessary throughout a page. In the style-sheet we write:

p.firstpara {font-family: Arial;}

And to apply these styles to a tag in a document we must write in the HTML text:

<p class="firstpara"> Some paragraph text goes here </p> 

ID Selectors: These can only be used once in a page. They have the greatest specificity, second only to inline-styles. We can write in the style-sheet:

#Tailpiece {color:gray;}

and we call the ID styles into use on the HTML page by typing:

<div id="Tailpiece" >This is the text </div>

Contextual Selectors: These describe the styles to apply when tags are nested within one another. In this example the style will only be applied to paragraph tags within division tags. We write:

div p {padding: 1em;}

and we use it on a page with:

<div><p>The is the text</p></div>

or combining these ideas, here are the styles for classes and IDs in a paragraph that is nested within a div:

div p.firstpara {background:green}

div p#tailpiece {font-size:30pt}

Attribute Selectors: These are selectors that have an attribute in square brackets modifying their action in a conditional way. To color all items with a title of "CSS Work" we might write in the style-sheet:

[title=CSS Work] {color: blue}

Pseudo Classes: These are classes that condition behavior, like that of selecting links on the page. We might write:

a:active {color:purple}

Pseudo Elements: These are elements such as 'first-line' and 'last-line' that allow additional control in the page. To make the first letter of all paragraphs bold, we could write:

p:first-letter {font-weight:bold}

Estimating Specificity

Style Declaration Specificity

Specificity relates to the extent to which declarations lack generality; the extent to which they apply to a tag on the page as opposed to their applying to tags in general. The method of deciding such a matter has been developed to a considerable extent.

The method that is used calculates a weighted sum that represents the specificity. The way to calculate specificity is as follows:

For any given style-sheet entry, examine its selector. The selector is sometimes simple, having only one part, or complex, comprised of many parts. Construct a value for specificity by adding to a total as follows:

For a universal selector (*) or an inherited value, add zero to the specificity total.
For an in-line style, add 1000 to the total. These are found only on the document.
For every ID selector mentioned, add 100 to the total.
For every class, pseudo-class, or attribute, add 10 to the total.
For every simple tag element and pseudo-element, add 1 to the total.

The highest value of specificity among competing style declarations within any one level results in its representing that level in the overall cascade. (See the graphic within the main page).

Specificity - Calculated Examples

 p { } 

Total=1, because there is only one simple tag element for the selector.

 div p { } 

Total=2, because there are two tag elements (2).

 p.topsection { } 

Total=11, because there is one tag element (1), plus one class (10).

 #toppara { } 

Total=100, because there is one ID selector (100)

 div table p#green { } 

Total=103, because there are three tag selectors (3), plus one ID (100).

 style="float:left;" 

Total=1000, because there is an inline style (1000)

 a:hover { } 

Total=11, because there is one tag element (1), plus one pseudo-class (10).

 p:first-line { } 

Total=2, because there is one tag element (1), plus one pseudo-element(1).

 p[title] { } 

Total=11, because there is one tag element (1), plus one attribute(1).

A Practical Styles Resolution Example

Resolving a Cascade of Styles

This drop-box provides a worked example for the resolution of styles, starting from inspection of the HTML entry and proceeding through specificity estimates to the displayed style choices.

A Test Web-page

It is assumed that the browser is attempting to resolve the styles for the paragraph tag in the listing below.

<!--   This is the test web-page - to resolve <p> styles --> 

<html>

 <head>

 <title>Test_the_Precedence</title>

    <style type="text/css">

       p {font-size:2em;font-family:courier;}

    </style> 

<link  rel="stylesheet" href="Ext_Author.css" type="text/css" media="screen"> 

 </head>

 <body>

   <div>

    <p id="bigpara" class="TahomaClass" style="font-size:20px;">Text</p>

   </div>

 </body>

</html>

On inspection of the paragraph tag above, it is apparent that it might be affected by any or all of the styles defined for the tag, the class 'TahomaClass', the ID 'bigpara', or any relevant styles related to nesting with the paragraph tag itself.

Style Origins to Consider

The possible style sources or origins are fivefold, and styles relevant to this paragraph tag might be found in any of them. In fact, competing styles might be found throughout. The styles' origins are listed here, in order of descending precedence:

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 ^[3] and the selectable default settings of the browser..

Within each of the above categories (origins), the relevant styles for the paragraph are located, but are not permitted to overlap or cross category boundaries. Then, still within their own categories the styles are filtered to find a set with the highest specificity. (See the drop-box in the main page on specificity.) For example, there might be several declarations for the tag's color at each level, but only one color value can be returned from each category. In this way each category performs selection at its own level before further resolution of these results in the cascade.

Of course, not every category will find a color style, because it might not have been specified. Some will find competing values of equal specificity, and duplicate entries.

Assume for now that all of the relevant styles have been found, then separated to place them in their precedence categories (origins). These relevant style declarations are listed below. Notice that the entries are color-banded to separate the categories, and that the items of greatest specificity have been marked. The selected styles from each category are displayed on the graphic that follows the listing.

The Relevant Styles to Filter

/*    From the browser UA style-sheet  */

p 
{
margin: 1em 0;         (max margin specificity= 1) 
}

/*    From the normal user declarations  */

div p
{
font-family: Arial;
font-style: italic;    (max font-style specificity= 2)
font-weight: normal    (max font-weight specificity= 2)
}
div
{
color: blue;           (max color specificity= 1) 
font-family: garamond;
}
div p.times
{
font-family: Times;    (max font-family specificity= 12)
}

/*    From the normal author declarations  */

p                          (1 of 2 duplicates)
{
font-size: 2em;
font-family:courier;
}   

p                          (2 of 2 duplicates)   
{
font-family: Garamond; (max font-family specificity= 1)    
font-weight: normal;
{

div p
{
font-weight: bold;      (max font-weight specificity= 2)   
}

div p.bigpara
{
font-size: 10px;                 
}

div p#bigpara
{
font-size: 16px;       
}

<p style="font:size:20px;"> (max font-size specificity= 1000)

/*    From the !Important author declarations  */

p
{
font-family: Calibri !important; (max font-family specificity= 1)
font-style: normal !important; (highest font-style specificity= 1)
color:blue !important;
}

div p
{
color:black !important; (max color specificity= 2)
}

/*    From the !Important user declarations   */

p
{
font-size: 30px !important; (max font-size specificity= 1)
}

p.TahomaClass
{
font-family: Tahoma !important; (max font-family specificity= 11)
font-size: 20px !important;
}

Summary of Selections

The styles now listed in each category are subjected to the precedences of the cascade to decide which of them should be used to display the text of the paragraph. When the specificity selections from the relevant styles are returned, they are related to their categories in the way of the graphic below.

The entries for these categories are found from the styles in the above panel.

Notice from the graphic that the styles with greatest specificity found in the above panels are the ones shown at each level. They are further subject to the priority (or precedence) given to the categories themselves. In the graphic, it is clear that an origin can only influence the outcome if no origin with higher precedence than it has proposed a value. The selections use this algorithm until the style set for display is found. The process is repeated for the properties of every tag in the web-page.

The emergent formats for this example, reduce to a paragraph set that appears equivalent to:

p 

{

font-family: Tahoma;

color: black;

font-style: normal;

margin: 1em 0;

font-size: 30px;

font-weight: bold;

}

Contests and Duplicates

There are consequences for the way that the browser processes style-sheets and web-pages. Not surprisingly the browser processes both from the top down, and when there are contesting styles of equal specificity within a level, (or indeed duplicates), then the ones encountered last by the browser will prevail. This is true of page handling or within the style-sheets themselves.

This further means that these declarations with equal specificity will have variable outcomes, depending upon whether the document's head styles were written above the links, or the converse. It also means that when there are several linked, external style sheets listed in the head of the document, that their sequence will be significant.

Because in-line styles are given such a high specificity, they always supersede other author styles, but still cannot prevail over user styles that are marked with the !important keyword.

In a truly practical situation there would be too many properties to consider in graphics, but the principle is sound, and can be applied to the general case.

The CSS terminology for a typical styles block.

A Basic Style Sheet

Some who are new to CSS will need a little longer to get a result from their user style-sheet, so a basic sheet has been listed below, to get the user started. The work then reduces to the addition of styles to the existing code, as and when required.

This sheet does nothing more than reduce a page to large black text on a plain white background, though the text size is larger than can be obtained from the browser's Text Size setting alone. (Ignoring page zoom). It is unclear as to whether or not such a page has viewing uses, but the example is useful in demonstrating the working of the !Important-override principle. Paste the following code into your user style sheet:

/*    styles for the body of the page in general */   

body {font-size:100% !important;}  

/*    styles for every element  */  

* {  

   font-color: black !important;

   background-color:white !important;   

   font-size:30px !important;

   font-family:Tahoma, Sans-serif !important;

   line-height:1.8em !important; 

   font-weight:normal !important;

   font-style:normal !important;

   word-spacing:12px !important;

   character-spacing:3px !important;

   text-decoration:none !important;

   text-align:left !important; 

  }

/*   Styles for the bold parts  */ 

b, strong, em, h1, h2, h3, h4, h5, h6 

{

font-weight: bold !important;

}

When the text is pasted into your installed style-sheet:

Open the Tools > Internet Options dialog.
On the General tab select Accessibility.
On the Formatting section, clear the three boxes.
In the User Style Sheet section, select the box marked Format documents using my style sheet.
Close the Internet Options dialog, and the browser, then reopen it.

Access web-pages (this, for example), to see the effect of your user style-sheet. Be sure to reset your browser's Zoom and Text Size to their nominal positions before making any comparisons. Whereas some changes to style-sheets can be seen to take place without a browser restart, not all changes will be made until it is done. This point, if ignored, can be a considerable source of confusion.

The style properties and values are easily changed for a different result. For those unfamiliar with styles and style-sheets, it is suggested that readers make full use of tutorials on the internet for their learning process. An exhaustive reference source that this author repeatedly comes back to for advice is W3 CSS Reference, and a simple, interactive, on-line code tester can be found at Font Tester. Further useful sources will be added to the See Also section of this page, as they become known.

	Because the MS Windows and MS Office products all use Internet Explorer to display their Help panels, you might find that you need to remove the tick mark for the user style-sheet between experimental sessions.
Technical Note: