Style sheets

Style sheets provide the ability to define a significant portion of the look & feel of html web pages in a single file which is referenced by all the web pages. This makes it much easier to maintain the look & feel as changes only need to me made at a single point. A side effect of this is that the html in the individual web pages becomes simpler and thus easier to maintain. You can focus on content without having to worry too much about appearance. Different browsers also have differences in the way they render pages, and style sheets can help eliminate these differences. We can also vary the content to some degree according to the output medium, removing unwanted parts when printing or when used by a screen reader. As the appearance is contained within the style sheet, if we agree to make changes we just need to change the style sheet and not all the individual pages. Of course web page changes will be required for the more complicated style changes such as changing the order of the items, e.g. moving links to the top of the page. But for simpler ones e.g. if we decided to change the font for quotes we only need to change the style sheet.

The style sheet tells the browser how to render the individual html elements defined in the web page. So if you use <h1> to define the top heading on a page, and you want it to be centred, you can define that in the style sheet and you don't have to wrap it in <center> directives. And that is the same for every single page that uses the style sheet. As you can see that is very useful, but you may want to be a bit more selective and just want changes on particular instances of a directive. The way that is done is by using additional parameters within the html directive. These are id= and class=. So if we wanted to define style attributes for our logo we could use <img ...... class=logo> with special code in the style sheet to handle that. There is not a lot of difference between id= and class= although the stated purpose of id= is for items that only appear once on a page, and class= for items that may be used a number of times.

Then there is the ability to define a specific style for a specific area on the page, and for that <div> is used to label those particular areas within the page. You will see later on for example that use <div id="footer"> around the footer at the bottom of the page so we can define the style to be used for that area.

Usage

We first need to define in the html header section that we want to use a style sheet e.g. (for pages held at www.genuki.org.uk)

<link rel="stylesheet" href="/css/genuki.css" type="text/css">

If your pages are held elsewhere it is recommended that you have a local copy of the style sheets there so your pages will still work if www.genuki.org.uk was unavailable.

Page layout

Within style sheets we define how the html tags should be used and presented, e.g. if we want a <h1> header to be in a different font. We usually want different styles in different parts of the pages, so first we need to think about our page layout. Genuki town and parish pages have the following format:

Introduction

Main

The background colours above are not used in the real style sheet, they are just used to help make it easy to visualise the page sections.

At the top of each page we have a Navigation bar (I'm not calling it a header to avoid confusion with the html header section), a Footer, and the Main section of the page. Within the Main section we have an Introduction at the top containing a description from an old gazetteer, a map, and links to sections within the page. There are variations in the layout of the Introduction across the counties.

In order to mark within the html which page section we are in, we use <div> ....... </div> tags. On the <div> tag we specify a parameter to label that section of the page. The documentation recommends that style sheets are drawn up so that if a <div> appears just once on a page, a id= parameter is used to name it, otherwise a class= parameter is used. So for navbar & footer you will need to use id=, and for the rest class=. As an example the Navigation bar above is coded as follows:

<div id="navbar">
<a href="/" class=logo></a>
<ul>
<li class=contents><a href="/contents/LANcontents.shtml">Contents</a>
<li class=up><a href="/big/eng/LAN">Lancashire</a>
<li class=nearby><a href="/cgi-bin/places?LAN,SD366271,5,Lytham">Nearby places</a>
</ul>
</div> <!-- end of navbar -->

It is surrounded by <div> ....... </div> tags and at the end you will see a comment reminding you which div its is. When you add more text to the page this is very useful making it much easier to see which section of the page you are in. The header right at the top of this page is written in the old way using tables and images. Using the style sheet we can remove alot of the html code and the table by redefining the way list are displayed in this section of the page. The class= parameter on the <li> is used to specify which image is going to appear agiainst the text, and defaults are set to avoid the need for some of the other parameters we've had to specify in the past within this section of the page.

So we have significantly simplified the html needed for this section of the page which makes maintenance simpler. But it also means that if in the future we wish to change the look and feel of the Navigation bar in the future, we just need to change the style sheet and not the thousands of html pages.

The footer above uses the following code:

<div id="footer">
<a class=html401 href="http://validator.w3.org/check/referer"></a>
<a class=help href="http://www.genuki.org.uk/cgi-bin/problems?LAN" title="Contact page maintainer">Find help, report  problems, or contribute information</a>
[<i>Last updated <!--#echo var="LAST_MODIFIED"--> - Phil Stringer</i>]
</div> <!-- End of footer -->

The hierarchy of divs is:

<div id="navbar">

</div> <!-- end of navbar -->
<div class=main>
<div class=intro>

</div> <!-- end of intro -->


</div> <!-- End of main -->
<div id=footer>

</div> <!-- End of footer -->

Coding the divs

Examples

A county page - Lancashire
A parish page - Lytham, Lancashire
A parish page with a short quote - Abram, Lancashire

Compare the page using the style sheets and the existing page. If you look at the source you will see that a significant amount of html has been removed.

More divs

We do also have some additional divs.

rightside - a 200 pixel wide area that floats on the right side of the page. This was initially developed for church pages to hold small versions of church pictures as links, but is now also used elsewhere.
churchask. Church pages can contain a series of questions asking for specific pieces of information. This used to be done via tables but the html is considerably simplified by redefining <ul> in this div to add icons.

Moving forward

Style sheets enable us to improve the appearance of our pages in a consistent way whatever format we use to hold our information as they are associated with the html which is presented to the user's browser. So we should start moving in that direction so that if we decide to change the look & feel in the future it will require signficantly less work to do so. And we can move forward in stages so that we can do the work at different rates.

Add the basic divs, header and footer as described above. This keeps the current look and feel. The maintainers gain simpler html code to maintain with a more consistent header. The pages are also then in a form that would make it easier to develop tools to break up existing pages if we wished to move to a Content Management System or a wiki.
Once a reasonable number of pages are using style sheets we will be in a position to consider smaller style changes. e.g. perhaps changing the font and indentation for our standard topic headings, or the font for quotes from old books.
Once the majority of pages are using style sheets look at more radical ideas such as changes to help with navigation such as replacement of the button bar by tabs .......

Local copies of stylesheets

The sections of our site that aren't hosted at www.genuki.org.uk should hold their own copies of the style sheets. Create a css directory at the same level as your images directory. The style sheets use relative links i.e. ../images/.... to find them. Another gain from this technique is to minimise the changes required if pages are to another host and it also means that they can be used if you look at your pages offline viewing copies on your own disk.

To enable the style sheets to be accessed in this way you will also need to code a relative link to them in

<link rel="stylesheet" href="../../../css/genuki.css" type="text/css">

with the appropriate number of ../'s according to where your pages sit in the hierarchy.

The sheets contain a version number as a comment at the top. This is provided to help make sure you have the latest versions at your site.

Work required

Problems

In IE7 if you shrink the width of the window the navbar doesn't display as we'd like. The list to the right of the logo drops down.
We are using a single style sheet genuki.css as a wrapper around any others we decide to use, and these are imported. However it appears the IE7 and below can't handle the parameter which defines the output type e.g. screen, print. At the moment no type is geven so that things work but we must find a way to handle this without having to put a link for each output type in every html page.

Enhancements

Provide an option in the navbar list to include the logo so that it doesn't have to be handled separately with <a class=logo This will make things simpler and more consistent and should overcome the IE narrow window problem.
This is possible in version 1.02 but with IE you have to supply text for the link e.g. Home as without it the image does not appear but it is clickable. The IE narrow window problem is still there and now the logo image is all scrunched up. On balance the separate logo copes best with the peculiarities of IE.

Find help, report problems, or contribute information. [Last updated: Wednesday, 08-Sep-2010 12:27:20 BST - Phil Stringer]