See the list of C.S.S. style sheet tutorials if you are interested in learning more about style sheets. This site also includes a page on C.S.S. Rollovers.
The use of style sheets to provide formatting has several accessibility advantages including the following:
See some code examples below.
However, care must be taken that Web sites are still readable on visual browsers with style sheets turned off. See a later section for details on what to avoid.
SECTION 508 - Documents shall be organized so they are readable without requiring an associated style sheet.
NOTE: The Bobby verification report will display your Web page without your CSS markup.
Do not use "visibility: hidden" to hide text from visual browsers; it also hides it from screen readers. Use color (e.g. white on white) or specifying size to 1px to hide text from visual browsers. See Accessible Methods for Hiding Text for details.
Remember that just about any tag can be styled. This includes accessibility tags such as TH, CAPTION, STRONG, FIELDSET, LABEL, and even B, I and OPTION or SELECT.
Avoid using float:right, since it typically requires coders to place elements which will be displayed on the right BEFORE elements placed on the left. Screen readers will read files in code order, not in layout order. A layout table may sometimes be more accessible than complicated CSS layouts.
It is also important to preview styled sheets in several browsers, especially Netscape 4.7 and lower. Implementation is still not standard across all browsers and some CSS errors cause blocks of text to overlap each other or disappear on some browsers.
Style sheet commands should usually be stored in another .css text file, not embedded in the HTML document itself. This allows users to completely override your style sheet
C.S.S. commands for fixing absolute font sizes should be avoided. Use relative font size scales instead.
Care should be taken that color schemes and backgrounds are accessible.
Style sheets are designed to allow you to globally specify colors, fonts and backgrounds for an entire Web site. For instance, if you specify that all H1 tags should be centered, then you do not need to repeat the ALIGN="center" tag on every page.
Here are some examples of how Style sheets can improve accessibility and reduce code maintenance.
The generic specifications for margin and line spacing are not optimized for screen legibility. Compare the following two paragraphs - one style for legibility and one with no styling.
Increased side margins, Verdana specified and line spacing increased slightly.
SAMPLE PARAGRAPH: Style sheets are designed to allow you to globally specify colors, fonts and backgrounds for an entire Web site. For instance, if you specify that all H1 tags should be centered, then you do not need to repeat the ALIGN="center" tag on every page.
body: {margin-left: 25px; margin-right: 25px;
font-family: Verdana,Arial,Helvetica,sans-serif;
line-spacing: 120%}
Text goes to edge of screen, is single spaced and in Times New Roman (bad for monitors).
SAMPLE PARAGRAPH: Style sheets are designed to allow you to globally specify colors, fonts and backgrounds for an entire Web site. For instance, if you specify that all H1 tags should be centered, then you do not need to repeat the ALIGN="center" tag on every page.
This Link becomes white text with navy background when the mouse rolls over it. See the Rollover Links page for more information on using CSS to create rollover links.
a:hover {background-color: #000066; color: white: font-weight: bold}
....
<a href="#"> Link </a>
Sample H1 - Centered and colored blue
h1 {color: #000066; text-align: center;}
...
<h1 > Sample H1 </h1>
<h1 align="center"> <font color="#336699> Sample H1 </font> </h1>
This is a centered pink div with dotted black border. Actually it's a P with a style specification.
.pinkdiv {border: 1px dotted black;
background-color: #FFAADD;
padding: 7px;
margin-left: 150px; margin-right: 150px;}
...
<p class="pinkdiv" > I want a centered pink div area </p >
1. Displaying colored or dotted borders extremely difficult and would probably require nested tables.
2. For a pink table with a plain border:
<table align="center" width="60%" cellpadding="7" border = "1">
<tr>
<td bgcolor="FFAADD"> I want a pink table </td>
</tr>
</table>
NOTE: Data tables are still be the best option for presenting tabular data.
Styling can become inaccessible when style sheet commands are mixed with older HTML formatting tags. When Style sheets are turned on, the result may be readable. But with Style sheets turned off, only the older HTML formatting is read and the page may become unreadable. For example:
Some sites use different "floats" to position content without tables. However, some style attributes, such as float: right cause text to place in an order different from that of the HTML file. For instance the following site uses float: right to position the gray box to the right of a list of links.
But in the code, the list in the gray box actually comes first. When CSS is disabled, you can see that list above the links. Fortuniately, the text can be read in either order.
This Web site has a black linen background with a pale rose area in the center with dark text. The color contrast is acceptable.
The designer used CSS for the pink area and an HTML tag to specify the black linen background as <body background="blacklinen.gif">.
Becaiuse only the rose text was formatted with CSS, when the style sheet was turned off, the result was black text and blue links on a black textured background - clearly unreadable in a visual browser.
Once the site was redesigned so that the background image was included in the CSS file and not in the HTML, the site without CSS was readable, although it appears with standard white background with black text.
Notice that the use of H tags to provide content structure means that sections are easier to distinguish even with Style sheets turned off.
Although Netscape 4.7 has some style sheet support, it is very inconsistent. In some cases, problematic styles may be ignored, but in others, the parsing may cause text to overlap or entire chunks of text to not display. All Websites with CSS should be previewed in Netscape 4.7 for legibility.
If you do have styles which are causing serious problems in Netscape 4.7, but not other browsers, you can specify styles which will be ignored by Netscape 4.7. This is done by creating two .css style sheets - one with styles which are rendered well in all browsers and those which are problematic for Netscape 4.7. Then, you use two different protocols to create links to the .css files, the "LINK" protocol which all browsers recognize and the "@IMPORT" protocol which Netscape 4.7 ignores, but it recognized by other browsers. See the example below.
<head>
<link href="Accessibility.css" rel="stylesheet" type="text/css" >
<style type="text/css" media="screen">@import url(AccesExtra.css); </style >
</head>
This is HEAD statement linking to two style sheets. The first statement is the LINK protocol which Netscape 4.7 recognizes. It links to a file called "Accessibility.css" containing styles which work in all browsers. The second statement is the @IMPORT protocol and it links to a second file called "AccessExtra.css". It also specifies that these styles are meant for the screen media and not other outlets such as print.
Site Menu:
Home Page/Main Menu
| Section 508 Guidelines
| Quick Checklist
| Details by Tag
| Links
| I.T.S. Seminar Page
| Sitemap
©1999-2006 Pennsylvania State University.
This Web page is hosted by (by Teaching and Learning with Technology, a unit of Information Technology Services. Please contact the Webmaster if you have any questions.