Skip to content | Skip to institutional links

Common menu bar links

Institutional links

CSIS

Quick Links

Transparency

Accessibility Help

Client-side CSS for Enhancing Accessibility
How to Create a Client-side CSS File
How to Configure Your Browser to Use a Client-side CSS File

Top of Page

Client-side CSS for Enhancing Accessibility

The design of the Web pages on this Web site are flexible enough to allow you to configure the visual presentation to meet your accessibility needs by using a client-side Cascading Style Sheet (CSS) file.

Most browsers provide the ability to specify a client-side CSS file, which would be applied to every Web page on this Web site that you visit. To take advantage of this feature, perform the following steps:

Top of Page

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.

Top of Page

How to Make the Skip Navigation Links Visible

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


div.navaid {

	position: static  !important;

	font-size: 100%  !important;

	float: none  !important;

	overflow: visible  !important;

	width: auto  !important;

	height: auto  !important;

}

div.navaid a {

	color: #00F  !important;

	padding: 5px  !important;

	line-height: 150%  !important;

}

2. Save your CSS file and refresh your browser.

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

Top of Page

How to Make Pages Expand across the Entire Screen

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

div.page {

width : 100%  !important;

}

2. Save your CSS file and refresh your browser

Your browser should now display the pages at 100 percent of the width of the screen.

Top of Page

How to Make All Links Underlined

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

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.

Top of Page

How to Make Links Have the Same Foreground and Background Colours

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

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;

}

Please note that the colours in the above example can be modified and are assigned as follows:

Link Property	Class Name	Class property	Colour (hex)	Colour
Background colour	`a:link, a:visited, a:hover`	`background-color`	`#FFF`	`White`
Normal link colour	`a:link`	`color`	`#00F`	`Blue`
Visited link colour	`a:visited`	`color`	`#009`	`Dark Blue`
Hover link colour	`a:hover`	`color`	`#F00`	`Red`

2. Save your CSS file and refresh your browser.

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

Top of Page

How to Add More Contrast to the Content Page Banner

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


div.banner, 

div.banner-eng, 

div.banner-fra, 

div.banner-lfcoa-eng, 

div-banner-lfcoa-fra {

	background: none !important;

	border-top: 1px solid #000 !important;

	border-left: 1px solid #000 !important;

	border-right: 1px solid #000 !important;

	min-height: 5.58em !important;

	margin-top: 3.14em !important;

	padding-bottom: 0.67em !important;

}



* html img.coa, * html img.lf {

	margin-top: -2.84em !important;

}

div.banner-lfcoa-eng img.coa, 

div.banner-lfcoa-eng img.lf, 

div-banner-lfcoa-fra img.coa, 

div-banner-lfcoa-fra img.lf {

	display: inline !important;	

}

div.banner-eng p.main, 

div-banner-fra p.main, 

div.banner-lfcoa-eng p.main, 

div-banner-lfcoa-fra p.main, 



div.banner-eng

p#siteuri, 

div-banner-fra p#siteuri, 

div.banner-lfcoa-eng p#siteuri, 

div-banner-lfcoa-fra p#siteuri {

	position: static !important;

	font-size: 100% !important;

	float: none !important;

	overflow: visible !important;

	width: auto !important;

	height: auto !important;

}

div.banner-eng p.main, 

div.banner-fra p.main, 

div.banner-lfcoa-eng p.main, 

div.banner-lfcoa-fra p.main {

	font-family: "times new roman", sans-serif !important;

	font-weight: bold !important; 

	font-size: 185% !important;

	margin: 0 !important;

	padding: 0 !important;

}

div.banner-eng p#siteuri, 

div-banner-fra p#siteuri, 

div.banner-lfcoa-eng p#siteuri, 

div-banner-lfcoa-fra p#siteuri {

	font-family: Arial, Helvetica, sans-serif !important;

	background-color: transparent !important;

	font-weight: lighter !important; 

	font-size: 110% !important;

	margin: 0 !important;

	padding: 0 !important;	

}

p.main, p.main span, p#siteuri, p#siteuri span {

	color: #000 !important;

}

* html p.main, 

* html p.main span, 

* html p#siteuri, 

* html p#siteuri span {

	width: 99.5% !important;

}

p.main img, p#siteuri img {

	display: none !important;

}

2. Save your CSS file and refresh your browser.

Your browser has now disabled the original background colour or image in the banner, and replaced it with a high contrast foreground and background colour combination.

Top of Page

How to Add More Contrast to the Welcome Page Message Area

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


.msgarea, .msgareaalt {

	background: none !important;

	border-top: 1px solid #000 !important;

	border-left: 1px solid #000 !important;

	border-right: 1px solid #000 !important;

}

.msgareaalt {

	border-bottom: 1px solid #000 !important;

}

* html .msgarea, 

* html .msgareaalt {

	width: 99.7% !important;

}

* html .msgarea {

	height: 129px !important;

}

* html .msgareaalt {

	height: 248px !important;

}

.msgarea h1, .msgareaalt h1 {

	color: #000 !important;

}

.msgarea h1.hidden, .msgareaalt h1.hidden {

	position: static !important;

	font-size: 200% !important;

	float: none !important;

	overflow: visible !important;

	width: 100% !important;

	height: auto !important;

	font-weight: bold !important;

}

.headcontainer {

	background-color: #FFF !important;

	color: #000 !important;

	border: 1px solid #000 !important;

}

* html .headcontainer {

	width: 99.7% !important;

	height: 118px !important;

}

2. Save your CSS file and refresh your browser.

Your browser has now disabled the original background colour or image in the Welcome Page message area, and replaced it with a high contrast foreground and background colour combination.

Top of Page

How to Configure Your Browser to Use a Client-side CSS File

Top of Page

Internet Explorer for Windows

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

Top of Page

Internet Explorer for Mac

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

Top of Page

Mozilla Firefox, Netscape (6.0 and Later) and Mozilla

Rename your client-side CSS file to “userContent.css”.
Copy the file to the “chrome” sub-folder in your browser profile folder. Instructions for finding your profile folder ( http://www.mozilla.org/support/firefox/edit#profile). The “chrome” sub-folder should contain the files “userContent-example.css” and “userChrome-example.css”.
Restart the browser.

Top of Page

Opera 8 and Later

Select “Preferences...” in the “Tools” menu.
Select the “Advanced” tab.
Select the “Content” option in the list.
Select the “Style options...” button.
Use the “Choose...” button to select your client-side CSS file.
Confirm the changes by using the “OK” button.

Top of Page

Opera 7

Select “Preferences...” in the “File” menu.
Select “Page Style”.
Use the “Choose...” button to select your client-side CSS file.
Confirm the changes by using the “OK” button.

Top of Page

Safari

Select “Preferences” in the “Safari” menu.
Select “Advanced”.
Use the “Other” button to select your client-side CSS file.
Confirm the changes by using the “OK” button.