The previous sessions have looked at how we can present our content so that machines such as screen readers, text browsers and search robots can understand our message. This lesson looks at how we can layout the content on a page so that it looks interesting to visual users without introducing barriers for disabled users. You are probably fairly conversant with Cascading Style Sheets (CSS), so this lesson should really be a simple reminder, but do take notice of the need to use proportional dimensions towards the end of this lesson.
Separating style from content.
The basic HTML page that we used in previous sessions contained no formatting instructions to define how the page looks on a browser. Instead it just gives the semantics, in other words, tells the browser or assistive technology what each piece of content is. If it is a paragraph, a list, heading etc. We now need to make the page look more interesting to visual users. We do this by using an external style sheet to apply the styles we want to each piece of content. Each HTML element can have a unique identity (id), or a general type (class) so that the browser knows how to style it by looking at the instructions in a special style sheet (CSS).
Style sheets allow you to control the rendering, e.g. fonts, colours, margins, typefaces, and other aspects of style, of a Web document without compromising its structure. They separate the style from the content and therefore leave your basic HTML page correctly structured for assistive software such as screen readers.
- You can define the look of a site in one file, and change the whole site by changing just the one file.
- The HTML code becomes simpler and more manageable because you don't have any style or layout information within it.
- By using relative measurements in your style sheet your documents will be flexible and properly displayed on any monitor at any resolution.
- CSS has been designed to deal with issues which HTML was not. Assistive software will simply ignore your style sheets so they can focus on the page content and semantics. Often applying their own styles to suit the needs of the user.
- Cascading means that the last style defined is the one applied, therefore if the user prefers a different font face or colour scheme they can over-ride your original specification. If you define colours or styling in html code the user cannot over-ride it
- Style sheets can also improve the printing of Web documents. Paper has different properties than a computer screen and the differences can be accounted for in a separate "print" style sheet.
- Separate CSS documents can also be written for speech enabled devices such as screen readers, they can produce rich aural presentations by describing pauses intonation, and other components of speech along with non-speech sound cues.
- Styles can be written to support new devices in the future without the need to re-write the HTML content.