|How this Service|
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
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
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.
<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.
<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:
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
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 -->
<ul>in this div to add icons.
cssdirectory at the same level as your
imagesdirectory. 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.
genuki.cssas 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.
<a class=logoThis 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.