Style Sheets

Aim

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).

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 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.

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.

Typical layout of a simple web page

 

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. 

Relative (proportional) dimensioning

There is no way to guarantee that a user will see the exact size of font or layout that we might want. In the World-Wide-Web the user has much more control over the look of the page than any other medium. So accept the inevitable and allow for the fact that your carefully designed pages are going to be shrunk or stretched by your visitors.

Many people will need to enlarge your font size. Others, such as those with dyslexia, may want to change your colour contrasts . People who have older video screens will have larger pixel sizes than your modern monitor. People using small devices such as mobile phones may have very small pixels and need to fit your page into a tiny screen.

The solution is to use relative (proportional) sizes for dimensions (including font sizes) so that the page can be adapted to the user's method of viewing. This is often referred to as creating a "liquid layout" because it allows the content to flow gracefully into the available space.

PROPORTIONAL DIMENSIONING FOR LAYOUT

We do not know what size, or type of screen the visitor is using, so we need to provide “liquid” dimensions to the layout that allows it to stretch and shrink gracefully. The two most common “liquid” measurement schemes are percentage ( % ) and ems ( em ).

Percentage (%) dimensioning is the most flexible as it allows the page to shrink and stretch to completely fill a user’s browsing window. This means, however, that you have no control over line endings within a sentence, though paragraphs will still end where they should.

em dimensioning uses (roughly) the width or height of the letter “M” using the current font size. If you set your base font to be “small” this would set “em” to be (roughly) equivalent to 10 pixels. Medium font size is (roughly) 12 pixels. By using “em”s for layout you can be sure that all your line endings remain the same, although people with very small screens will need to scroll across the screen horizontally, and people with large screens may have empty space at the side of the screen unless they enlarge the font size.

Which system you use will depend upon circumstances as each design is different. It is quite possible to use both systems on the same page. For example we are using a page width of 100% for these lesson notes because we want to use the full screen and are not worried about line endings. But when we include samples of code we us a <div> layer with a width specified in ems so that the code always looks right (doesn't wrap if the screen is too small). For our sample design with a left-hand vertical navigation panel we specified the width of the "menu" div to be 2 ems wider than the longest link text so that all our navigation buttons fitted within the menu area without wrapping on to a new line.

Setting out the page layout using proportional dimensions is not an exact science so you will need to experiment a little in order to get the best compromise. (Hint to commercial designers: Check out what screen size and resolution your client uses so that you can test the site with the same settings before you demonstrate it, this can save considerable discussion with the client)

FIXED DIMENSIONS FOR PICTURES

The exception to the rule of using proportional (liquid) dimensioning is when you import images. If you have a beautifully posed photograph of your CEO on your "About Us" page you really do not want it to stretch out of proportion. For image you should use pixels to specify width and height. This is discussed more fully in the lesson on media (Lesson 7)

Allowing for border thickness

When working on the layout of a page it is important to remember that any defined area has three attributes that different web-browsers can treat in different ways. The external margin, the border, and the internal padding can all be given values for width or height. See diagram below.

Diagram showing parts of a layer
Diagram showing parts of a layer

The only part of the layer that is not specified exactly is the content area where you want to place your information! This can be a real problem with CSS which requires careful mathematical control - so be warned. It is a good idea to work out dimensions with pencil and paper first and then test it in a variety of ways. We discuss this issue a little more when we look at using tables to control layout, but it doesn't make any difference if you use absolute or relative dimensioning, so for accessibility reasons, always use relative measurements for page layout.

Creating a style sheet

Style sheets are simple ASCII text files that only contain styling instructions for the browser. The style sheet is usually ignored by assistive software because it controls the visual effect only. Special style sheets for audio devices can be created to control volume and accent, but for these lessons we shall concentrate only on the common style sheets used for screen output.

The style sheet below will produce the simple layout we want. You will see this in operation later in the lesson. The file has been annotated to help with maintenance. Notes are surrounded by the /* and */ characters so that the browser knows to ignore them.

/* CSS file demo2.css - to put navigation menu at left of page */

/* set basic font style and background colour */
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: x-small;
color: #000000
background-color: #FFFFFF;
}
/* Set banner area height and background image */
#banner {
height: 7em;
background-color: #E0E0E0;
background-image: url(banner_grey_3.gif);
}
/* define content area, leave room for menu on left */
#content {
margin-left: 12em;
background-color: #E0E0E0;
}
/* define the look for heading level 2 */
#content h2 {
color: #333333;
text-indent: -1em;
}
#content p {
font-size: x-small;
font-style: italic;
}
/* define menu area so it fits beside content area */
#menu {
color: #FFFFFF;
background-color: #979797;
position: absolute;
top: 7em;
width: 11em;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000000;
}
/* hide the menu heading from visual users */
#menu h2 {
display: none;
}
/* define the list element to use arrow image for the bullet */
#menu ul {
list-style-image: url(arrow_right.gif);
}
/* define the look of the navigation link text */
#menu a:link {
font-size: medium;
font-weight: bold;
color: #000066;
}
/* set roll-over colours for mouse and keyboard users */
#menu a:hover { color: #333333; }
#menu a:active { color: #333333; }

 

Linking the style sheet to the HTML page

The style sheet is linked to the HTML page by a hyperlink included in the <head> section of the page. In this case we would insert the following code just before we close the head section with </head>
<link href="/demo2.css" rel="stylesheet" type="text/css" />

Now whenever the page is loaded into a browser such as Internet Explorer the computer will automatically load the style sheet as well.

It is possible to link to more than one style sheet, in which case the styles defined in the additional style sheets will over-write any similarly named styles in the earlier sheets. This is why they are called “cascading” style sheets. The last style definition for a particular element is the one that the browser will apply.

It is also desirable to provide separate style sheets for different media. By default the stylesheet is applied to any media that the reader is using, (media=”all”) but you can (should) provide separate style sheets for screen, print, handheld, tv and even audio devices. The media=”print” stylesheet might hide the navigation bars and use Times New Roman for the main text font face. The media=”handheld” might hide all the images to reduce bandwidth.

Standard visual layout of web pages

Most web pages have a common "look and feel". A banner (corporate logo) and site-wide navigation bar are placed at the top of the page with section navigation links in the left column. The main content of the page is placed in the middle area. Additional reading or advertisements can be placed next to the main text in a right column and a footer area at the bottom of the page repeats the top-level links.

Basic layout of a web page
Typical layout for a standard web page

Although there is no definitive research proving that the above structure is the most effective, there are some practical reasons why this design has become so popular. The top banner creates an identity that the user might remember and so use again. The top navigation bar shows that there is more content available on the site that could be worth exploring. The main content is centrally placed so that the main heading and introductory text are within the users initial focus. The central column format means that the main text has a line length short enough to be easy to follow on the screen. The left-hand sub-content navigation bar is always visible, even if the user has a small screen, so other information relevant to the page content is easy to find. The right-hand column is less important and might be out of view so it can be safely ignored. The bottom navigation bar saves the user having to scroll back to the top of the page to continue using the site.

Note that you do not have to follow the above layout design in order to create an accessible web site. You may want to make your site "stand out from the crowd". This is perfectly acceptable, so long as you keep the design consistent throughout the site! Once the user has become used to your special design it is very confusing if a different layout suddenly appears.

Consistency of layout

Whichever style of layout you use, it is important to maintain a consitent style throughout the site. Your visitors want to find your information, not spend time learning how to manage new page layouts. Once a visitor becomes familiar with where the navigation buttons are they expect them to always be in the same place. This makes site navigation "intuitive".

Confusing layouts

 

Consistent layout

If you have different sections of your site that you want to distingush from each other this can be done by using colours or headings rather than changing the overall layout.