Web Access Centre

Cascading Style Sheets - Web Access Centre

Summary: The use of cascading style sheets is recommended for layout but not required.

• Rationale
• Techniques
• Testing tips
• Website Accessibility Initiative compliance
• Other pages about layout and structure

---

Rationale

Using HTML to format a web page can lead to bulky, inefficient and repetitive coding. In addition, using HTML to visually format a document can interfere with its structure. Put simply, designing pages with layout and formatting in the HTML documents is like designing a building that requires you to take down walls to change the wallpaper.

Most of the HTML tags and attributes commonly used for visual formatting are now deprecated, and the W3C (World Wide Web Consortium) recommends using CSS (Cascading Style Sheets) for both layout and formatting.

CSS offers designers more precise control over layout and formatting options than HTML can. Once the formatting elements have been removed from the HTML in a web page, it allows the main focus to be on structural markup which is the true nature of HTML.

CSS is compliant with the latest technologies, such as extensible HTML (XHTML). It works together with Dynamic HTML (dHTML) and JavaScript. CSS files can be read and used by other languages and applications.

As a bonus, the fact that most web sites could use a single style sheet to format all web pages means that CSS dramatically reduces the cost of site maintenance and makes global changes to the look and feel of the site very much more feasible.

Another consideration is that increasingly people are using their own personal Style Sheets to format web pages to meet their specific needs, for example, to increase the font size or change the colour and contrast. However, these can be made less useful if web designers use values and settings that cannot be overridden.

Techniques

• Use external style sheets wherever possible. There two other methods of introducing CSS into your HTML files, inline styles which are coded within an HTML element and only affect that particular instance of that element and embedded styles which are inserted into the HEAD of an individual document as a list. W3C recommends that inline styles should be avoided and that linked external sheets are preferable to embedded ones. To get the most benefit from CSS, you will want to use external style sheets anyway, to:

- Reduce the file size of your web pages.
- Allow you to re-use the same styles on different web pages without having to code them again and again.
- Allow you to update the styles on every page on your website simultaneously by updating the master style sheet.
- Provide a quicker download. The file will be saved in users' web caches by default. This means that it doesn’t need to be downloaded for each new page they visit on your site, so performance is significantly improved.
- To link a style sheet to each of your HTML pages, reference it in the HEAD of the document using code similar to the following example:

<Link href="CSSfilepath/filename.css" type=text/css rel=stylesheet>

• CSS rules consist of two main parts: selectors, which equate to HTML elements and declarations, which are similar to HTML attributes and their values.
  
  The declaration is also made up of two parts: the property and the value. This can best be understood by looking at an example:

h1 { color: blue }

In this example, H1 is the selector; COLOR is the property and BLUE is the value.

It really is as simple as that, though of course even rules have to have rules to abide by. Read on …

• Defining property values, wherever possible use relative expressions rather than fixed or absolute ones, for example,

body {
font-size: 100%;
margin: 3em;
}
table {
width: 100%;
}
tr {
line-height: 110%
}

Note that it isn't only the font size that is defined in relative terms, but also selectors that may contain text. This ensures that when users select larger or smaller text size settings in their browser to suit their reading requirements, container sizes will scale accordingly and not force the larger text into a space that is too small for it.

• Relative, or flexible, units to choose from:
  Percentages (%) increase or decrease from the browser font size set
  Em (relative to the size of the capital M)
  Ex (relative to the size of the capital X)
  Keywords (small, medium, larger, smaller, larger, etc.)
  
  
• Absolute, or fixed, units to avoid:
  Points (pt)
  Pixels (px)
  Standard measurement units (cm, mm, in)
  Picas (pc)
  
  
• Font values should be chosen with care to ensure that the text will scale properly. Set the base size of your BODY element to 100% (or equivalent: 1em, 1ex, or medium) to ensure that it will be displayed at 100% of the user's chosen setting. This will also make sure that an Internet Explorer error that occurs when the base font is specified at less than 100%, or 1em, is not triggered. This error compounds the difference between font sizes, which can result in either unintentionally extra small or extra large text.
  
  
• Images should not have transparent backgrounds, especially images of text. As the user may well use their own CSS style sheet, the possibility of images set against a different background colour becoming unrecognisable or unreadable is a very real one.
  
  
• Allow user override of your formatting. The most common changes that may be required are to make font sizes bigger or change the colours and contrast to suit an individual's needs, so unless there is a good reason to define these as "important", avoid doing so.
  
  
• Test CSS specifications to ensure that they are implemented or supported by all browsers. Support for CSS standards can vary from browser to browser so test pages in a range of browsers to make sure they support your styles, and that they will display your pages correctly.
  
  
• Ensure good linearity for users who don’t use CSS by coding your HTML elements in the order they need to be read in. For example, place important information and content first, provide groups of links for navigation, etc.
  
  
• Choose wording carefully to avoid making colour or format specific comments, like “Follow the instructions in red” or “important information is highlighted in bold”. These will be meaningless if the relevant style settings are disabled or overridden by the user.
  
  
• Don't forget to remove all formatting code from your HTML once you have implemented the CSS.

Testing tips

Font sizes must be flexible ie em, %, smaller etc not pt or px. Text must not become overlapping or truncated when text is enlarged, images should be visible / readable when CSS is removed. If any of the text, link or background colours are defined, all of the other colours should also be defined.

• Automated tools - Tools can pick up on fixed font sizes.
  
  
• Accessibility toolbar – CSS - Show Style Sheet. This will display the content of any linked CSS style sheets. Search for Absolute units: "pt" "px" etc, search for "line-height" and ensure that it has not been defined using absolute values. CSS - Disable CSS. Toggles CSS off and on to ensure that that the page makes sense without the CSS formatting and that images do not interfere with the legibility of text. CSS - Show Style Sheet. This will show any linked CSS style sheets. Search for "color"
  
  
• Browser - View - Source. Edit - Find - "css" AND Source. Edit - Find - "style". This can show if inline CSS styles are being used also search for "line-height". To make sure that tables, DIVs etc will expand to accommodate larger text sizes: View - Text Size - "Largest". Tools - Internet Options - Accessibility check "Ignore colours on the page" to ensure that images are still readable. View - Source. Edit - Find "color" and "font" to ensure that formatting has been removed from the HTML pages.
  
  
• Screen reader - Listen to the order of output – it should be logical and make sense.
  
  
• Text browser - Ensure that the page reads in a logical order.

Website Accessibility Initiative compliance

• 2.1 Ensure that all information conveyed with color is also available without color, for example from context or markup. Priority 1
  
  
• 6.1 Organize documents so they may be read without style sheets. For example, when an HTML document is rendered without associated style sheets, it must still be possible to read the document. Priority 1
  
  
• 3.2 Create documents that validate to published formal grammars. Priority 2
  
  
• 3.3 Use style sheets to control layout and presentation. Priority 2
  
  
• 3.4 Use relative rather than absolute units in markup language attribute values and style sheet property values. Priority 2
  
  
• 11.1 Use W3C technologies when they are available and appropriate for a task and use the latest versions when supported. Priority 2
  
  
• 11.2 Avoid deprecated features of W3C technologies. Priority 2
  
  
• 14.3 Create a style of presentation that is consistent across pages. Priority 3

For more information on techniques visit the Web Accessibility Initiative techniques page.

Other pages about layout and structure

• CSS
• Data tables
• Doctypes
• Frames
• Layout tables
• Metadata
• Structure

Back to Design & Build

For Web Access Centre updates email webaccess@rnib.org.uk

Content author: webaccess@rnib.org.uk

Last updated: 06/03/2008 15:41