In this lesson
Page Layout With Cascading Style Sheets (CSS)
Aim
The previous lessons 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. We now need to make the page look more interesting to visual users. We do this by dividing the page into specific areas (divisions/layers) and then use an external style sheet to apply the styles we want to each of these areas. Each area 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).
Accessibility Benefits of style sheets
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 to keep repeating tricks to control rendering in your HTML files
- By using relative measurements in your style sheet your documents will be 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 will not break the flow of existing pages.
- 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.
- 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.
- CSS can 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.
Applying style sheets
By way of example we shall take a simple page similar to that we used in the previous lesson.
<head>
<title>Layout Demonstration </title>
</head>
<body>
<h1>Page Heading</h1>
- some introductory text –
<h2> First section heading</h2>
- paragraph or two of text –
<h2> Next section heading</h2>
- some text
<h3>Subsection heading</h3>
some text
<h3>Next subsection</h3>
more text
<h2>Site Navigation</h2>
<ul>
<li>first link</li>
<li>second link</li>
<li>third link</li>
</ul>
</body>
We now need to decide how we want this to look when presented by a standard web browser. For this session we shall assume that the creative director has given us a simple layout as shown below.
There are three separate areas (banner, navigation and content) arranged within the main body area. The next step is to add these divisions to our HTML page so that they create blocks that the style sheet can manage. We actually have four divisions for this page.
1. The <body> area that encompasses the whole page.
2. The banner area that will include our logo
3. The content area that includes our text
4. The menu area that includes links to other pages
Our revised HTML (with the new code shown in bold) will now look like this :-
<html>
<head>
<title>Layout Demonstration</title>
</head>
<body>
<div id="banner"></div>
<div id="content">
<h1>Page Heading </h1>
<p> what the page is about</p>
<h2>First section heading</h2>
<p>Some introductory text</p>
<h2>Next section heading</h2>
<p>Some text relevant to this section</p>
<h3>Subsection heading </h3>
<p>Some more text describing topic in greater detail</p>
<h3>Subsection heading </h3>
<p>More text</p>
</div>
<div id="menu">
<h2>Site Navigation </h2>
<ul>
<li><a href="layout1.html">Page 1</a></li>
<li><a href="layout1.html">Page 2</a></li>
<li><a href="layout1.html">Page 3</a></li>
<li><a href="layout1.html">Page 4</a></li>
</ul>
</div>
</body>
</html>
Note that the banner division is empty, this is because it will only contain the logo image which is not really interesting to blind users, or search engines, so the image will be imported by the style sheet. We will look at how this works in lesson 7 when we discuss the use of images. The important thing to notice now is that we have not changed the sequence of the basic HTML page. The extra <div> elements shown in bold above will be ignored by screen readers and search engines.
We now need to create a suitable style sheet and link it to the HTML page so that visual users receive the page as we want it to look. Please go to the next session.
The following guidelines are relevant to this session
Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive
1.3 Adaptable: Create content that can be presented in different ways (for example simpler layout ) without losing information or structure.