National Energy Board Coat of Arms
Symbol of the Government of Canada

National Energy Board

www.neb-one.gc.ca

Breadcrumb

Home > Help > Accessibility Help

Accessibility Help

Client-side CSS for enhancing accessibility

How to create a client-side CSS file

To create a client-side style sheet, create a plain text file with a ".css" file extension using either a plain text editor or a CSS editor. Include CSS syntax (http://www.w3.org/Style/CSS/) in your client-side CSS file to control the visual presentation of Web pages.

To make it easier for you to enhance the accessibility of Web pages on this Web site, you can include any combination of the following client-side CSS in your client-side CSS file.

How to make the skip navigation links visible?

  1. Open you client-side CSS file and paste the following snippet:

    .navaid{
    position: static !important;
    font-size: 100% !important;
    float: none !important;
    overflow: visible !important;
    width: auto !important;
    height: auto !important;
    }

  2. Save your CSS file and refresh your browser

Your browser should now display the "Skip to content" and "Skip to institutional links"

How to make all links underlined?

Open you client-side CSS file and paste the following snippet:

  1. a:link, a:visited, a:hover {
    text-decoration: underline !important;
    }
  2. Save your CSS file and refresh your browser

Your browser should now underline all links on the screen.

How to make links all have the same foreground and background colours?

Open you client-side CSS file and paste the following snippet:

  1. a:link, a:visited, a:hover {
    background-color: #FFF !important;
    font-weight: normal !important;
    font-style: normal !important;
    font-variant: normal !important;
    padding: 0px 0px 2px 2px !important;
    }

    a:link { color: #00F !important; }
    a:visited { color: #009 !important; }
    a:hover { color: #F00 !important; }
  2. Save your CSS file and refresh your browser

Your browser should now display all links with the same foreground and background colours.

How to configure your browser to use a client-side CSS file?

Internet Explorer for Windows

  1. Select "Internet Options..." in the "Tools" menu.
  2. Select the "Accessibility..." button.
  3. Check the "Format documents using my style sheet" box.
  4. Use the "Browse..." button to select your client-side CSS file.
  5. Confirm the changes by using the "OK" button.

Internet Explorer for Mac

  1. Select "Preferences..." in the "Explorer" menu.
  2. Select the "Web Content" section under the "Web Browser" list item (expand the "Web Browser" list item as necessary).
  3. Check the "Show style sheets" and "Use my style sheet" boxes.
  4. Use the "Select Style Sheet..." button to select your client-side CSS file.
  5. Confirm the changes by using the "OK" button.

Mozilla Firefox, Netscape (6.0 and later) and Mozilla

  1. Rename your client-side CSS file to "userContent.css".
  2. Copy the file to the "chrome" sub-folder in your browser profile folder. Instructions for finding your profile folder (support.mozilla.com/en-US/kb/Firefox+Support+Home+Page). The "chrome" sub-folder should contain the files "userContent-example.css" and "userChrome-example.css".
  3. Restart the browser.

Opera 8 and later

  1. Select "Preferences..." in the "Tools" menu.
  2. Select the "Advanced" tab.
  3. Select the "Content" option in the list.
  4. Select the "Style options..." button.
  5. Use the "Choose..." button to select your client-side CSS file.
  6. Confirm the changes by using the "OK" button.

Opera 7

  1. Select "Preferences..." in the "File" menu.
  2. Select "Page Style".
  3. Use the "Choose..." button to select your client-side CSS file.
  4. Confirm the changes by using the "OK" button.

Safari

  1. Select "Preferences" in the "Safari" menu.
  2. Select "Advanced".
  3. Use the "Other" button to select your client-side CSS file.
  4. Confirm the changes by using the "OK" button.

 

Footer

Date Modified:
2011-10-28