Page Layout With Cascading Style Sheets (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.

By way of example we shall take a simple page similar to that we used in the previous lesson.

Applying style sheets

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