Internet Explorer/Adding User Styles
Page Under Construction - 30 Dec 2010
[edit | edit source]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
[edit | edit source]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
[edit | edit source]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
[edit | edit source]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
[edit | edit source]- 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
[edit | edit source]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
[edit | edit source]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
[edit | edit source]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.
|
|
|
The CSS terminology for a typical styles block. |
A Basic Style Sheet
[edit | edit source]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: |
Reference
[edit | edit source]- ↑ Browser User Agent Style-sheet Listings
- ↑ W3:The Cascade
- ↑ Browser User Agent Style-sheet Listings
See Also
[edit | edit source]- Browser Font Settings : A discussion on browser font settings.
- Font Tester : A free-to-use, interactive, CSS code writer and viewer, primarily for text.
- Typeface : A detailed page on fonts from Wikipedia
- W3 CSS Reference : The World Wide Web Consortium's CSS reference pages
- Internet Explorer 8 User Style Sheets : A sparse piece from Microsoft.
- Customizing Firefox with User Style-sheets : User CSS notes for the Mozilla (Firefox) browser
- Locate the Firefox Profile Folder : How to find your Firefox profile folder - where the css file has to be manually installed
- Opera - User CSS : User CSS notes for the Opera browser