>> | Home | Recent Projects | Systems Design | Accessibility | Web Design | Contacts


Curlew Communications Limited


5. Accessing The Inaccessible - Writing User Style Sheets

This page explains how to write a "User Style Sheet" for use with Microsoft Internet Explorer. It is one of the series of pages which contain self-help advice to help people who have poor but useful vision to access web pages more easily. Some of the advice may help people with other needs.

The examples are based on Microsoft Internet Explorer 5.5, 6.0 or 7.0 (MSIE) running on Microsoft Windows 98se or Windows XP.

Pages in this series:

  1. Introduction to Accessibility.
  2. Adapting the Web Browser.
  3. Introduction to User Style Sheets.
  4. Introduction to HTML.
  5. How to Write a User Style Sheet.
  6. Using Special Software Tools.
  7. Internet Glossary and Guide.

Disclaimer

This information is supplied "as is". Neither Curlew Communications Limited nor the author take responsibility for any loss or damage caused by use of the information.


Page Contents

Introduction

This page explains how to write a "User Style Sheet" in order to gain extra control over the appearance of web pages displayed on your PC.

User style sheets have several advantages over other ways of controlling the web browser. They are more flexible and are easily portable between PCs.

Note. Some anti-spyware programs, such as Spybot Search and Destroy, may report a user style sheet as a "potential browser hijacker." Such reports should be followed-up but will probably be false alarms.


Writing Style Sheets

This first style sheet will increase the font size, increase the line spacing to double-spaced, and invert the colours so that web pages have white text against a black background.

To write the style sheet open MS Notepad® and on the first line of a new document type:

body, p, th, td, a { font-size: large !important; line-height: 200% !important ; background: black !important ; color: white !important }

Then save this new document to the PC desktop with a name such as "height1.css".

This style sheet makes four changes to five HTML tags. The HTML tags affected are at the beginning of the line, separated by commas. They are body (ie. web page body), p (ie. paragraphs), th (ie. headings of HTML tables), td (ie. data within HTML tables), and a (ie. hyperlinks) .

The four changes are specified within the brackets. They are separated by semi-colons:

Note that "color" is spelt in the American way. The term "!important" is used to enforce our settings over those of the web designer.


Activating Style Sheets

Activate the style sheet by opening MS Internet Explorer. In the Tools menu select:
 Internet Options .... (General Tab) .... Accessibility.

This opens the Accessibility form. The Top three Formatting boxes should not be checked. Under User Style Sheet, check the box: "Format Documents Using My Style Sheet".

Now click the Browse button and in the dialog, browse the desktop to find your new style sheet (height1.css). Highlight the style sheet and click Open. This will close the dialog and return to the Accessibility form. Click OK to close this form. Immediately, Internet Explorer will begin using the style sheet on all web pages. Click OK to close the Internet Options form.

While this style sheet is active, most web pages will be displayed as white text on a black background, in a large font size with double spaced lines. Note. On some web sites, the designer's setting will override this simple style sheet.

To stop using the style sheet, return to the Tools menu, Internet Options, Accessibility. On the Accessibility form, uncheck the box: "Format Documents Using My Style Sheet". Click OK to close this form. Immediately, Internet Explorer will stop using the style sheet and return to normal. Click OK to close the Internet Options form.


Example Style Sheets

These four examples demonstrate some more possibilities. In order to make them easier to view and download, they have been given ".txt" file extensions rather than the conventional ".css" file extension normally used for Style Sheets.

"height1.txt" is the same as the "height1.css" file.

"link1.txt" removes the underlining from links (new and visited) and displays them in a blue font unless a link is active or the mouse pointer is hovering over it, whereupon the link changes to red, underlined text.

The reason for removing the underlining is that people with some eye conditions find underlined text very difficult to read. The colour change when the link is active can help clarify which link is about to be selected. Active link could have been given a larger font size. However, this can cause confusing "shuffling" on the display as text changes size.

"black1.txt" and "grey1.txt" are more comprehensive style sheets. They define the size and style of most of the text on a web page. In addition, the fourth, fifth and sixth paragraphs overcome problems with particular Internet web sites.

The standard for style sheets decrees that more specific descriptions shall overrule any less specific descriptions. For example, if the users style sheet calls for all links to be coloured blue, but the web designer's style sheet calls for active links to be coloured red, then the designer's sheet overrides the user's sheet because it contains a more specific description of the special cases of links (ie. active links) that are to be coloured red.

Some news and technical web sites use special descriptions for parts of the text on their web pages. In order to control the appearance of those parts of the web pages, the fourth, fifth and sixth paragraphs of these two style sheets includes specific definitions.

The specific names used by these web sites were found by inspecting the HTML code via the View Source facility of Internet Explorer.

These pages have introduced the subject. For more information, read one of the excellent HTML and CSS tutorials available via the Internet.


Next Page:


Pages in this series:

  1. Introduction to Accessibility.
  2. Adapting the Web Browser.
  3. Introduction to User Style Sheets.
  4. Introduction to HTML.
  5. How to Write a User Style Sheet.
  6. Using Special Software Tools.
  7. Internet Glossary and Guide.

More Information

For more information, read one of the excellent tutorials available on the Internet. The official standards are also available.



Home | Recent Projects | Systems Design | Accessibility | Web Design | Contacts


©2001 - 2015. Curlew Communications Ltd.
Registered in England; Reg. Number: 3365967; Reg. Office:
Hemyock Castle, Hemyock, CULLOMPTON, Devon, EX15 3RJ, UK.