1. Accessibility & Legislation
  2. Common Issues
  3. Testing & Tools
  4. Analysing Your Site

2.08 Common issues: Cascading Style Sheets

Cascading Style Sheets (CSS)

Not all browsers support style sheets and others support them in an inconsistent manner. If visual layout is controlled with style sheets and the page is viewed on a browser which does not support them, the logical structure and the information may become meaningless. For example blind people or others accessing your site with text readers have no need for visual information and may choose to ignore style sheets.


Simple example

Take a look at this site with CSS switched off. The page displays in an almost text-only manner, with all content and navigation available. Headings have been used in the correct order, lists of links (menus) have been coded as lists, tables are reserved for tabular data. This is termed "Accessible Design".

The idea is a simple one separate content from presentation style. Place all styling information (colour, size, position) in a separate file called a style sheet. This way technologies that understand style sheets will use them while those that do not still receive the content.


Complex example

Have a look at the Becta website. This site has been designed and developed with CSS. When the site is visited without CSS supported all content is still available, comprehensible and easily legible.

This has partially been achieved by developing the content pages in a structural way ensuring that if style sheets are turned off the structure and "message" still exists:

It is worth noting that the Becta homepages do not use tables for visual layout.


Issue 1

Problems occur when sites are developed partially with style sheets and partially with inline styling in the HTML. Sometimes the code of one overrides the code of the other and both are needed to display the content.

Consider the following example of a table holding a simple menu of links:

Home Services Resources

In the code it looks like this:

<style type="text/css">
a {color:white; font-weight:bold; display:block; width:100%}
</style>

<table>
<tr bgcolor="blue">
  <td><a href="#">Home</a></td>
  <td><a href="#">Services</a></td>
  <td><a href="#">Resources</a></td>
</tr>
</table>

Note the background colour is set on the table row while the style sheet sets the link colour.

It looks fine with CSS on but with the style sheet switched off the link text becomes default blue while the background inline colour remains blue. Blue text on a blue background is not very readable.

To check this does not occur switch off the style sheet and inspect each page to ensure it is still readable.


Issue 2

Using cascading style sheets to position elements can also have issues. Consider the following three paragraph example:

With CSS on you see three paragraphs in three parallel columns:

Paragraph Three: Displays to the right (float:right) with CSS on but displays first with CSS off.

Paragraph One: Displays to the left (float:left) with CSS on but displays second with CSS off.

Paragraph Two: Displays in the middle (no float) with CSS on but displays last with CSS off.


Problems arise if in paragraph three you refer to the others as being to the left or right because with CSS off they are stacked vertically.

Also with CSS off problems may arise from the change in the reading order too.

With CSS off you see the same three paragraphs but in three rows:

Paragraph Three: Displays to the right (float:right) with CSS on but displays first with CSS off.

Paragraph One: Displays to the left (float:left) with CSS on but displays second with CSS off.

Paragraph Two: Displays in the middle (no float) with CSS on but displays last with CSS off.


To ensure this does not happen switch off the style sheet and visually check each page.


WAI guidelines:

6.1 Organize documents so they may be read without style sheets. [NGfL requirement]


Further information:


Common issues