Control layout and presentation by using style sheets.

(see guidelines for overcoming access barriers)

Using CSS you can change the look and feel for different outputs by including a stylesheet for screen, print and handheld devices.

For example, use the CSS 'font' property instead of the HTML FONT element to control font styles.

This combined with the use of setting relative rather than absolute font sizes will allow users to change text sizes, whilst those who don't need font types and sizes (such as those using text readers) will not be forced to download HTML code which is useless to them.

Whilst beginner web developers tend to use their editor to place the font tags around the text in their html code eg:

<font face="Arial, Helvetica, sans-serif" size="3"> Example of html font tag </font>

this is not the recommended practice.

A great explanation of the reasoning for this guideline can be found at
http://www.mcsr.olemiss.edu/~mudws/font.html.

Example:

Controlling layout using Style sheets:

This is a heading one

This is a heading two.

This is a paragraph

Code for a simple style sheet:


h1 {
	/* top, right, bottom, left */
	margin : +15px +0px +2px +0px;
	color: #444466;
	font-size : 140%;
	font-weight: bold;
}

h2 {
	/* top, right, bottom, left */
	margin : +5px +0px +15px +45px;
	color: #000000;
	font-size : 135%;
	font-weight: normal;
}

Save this code in a separate .css file and link to it from within the html. The html page should look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
			  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>CSS example</title>
   <link href="example.css" rel="stylesheet" type="text/css">
</head>
<body>
   <h1>This is a heading one</h1>
   <h2>This is a heading two.</h2>
   <p>This is a paragraph </p>
</body>
</html>