(everything above this point is defined in the 'header' of the site template)

Top level heading - Heading 1

The purpose of this page is to demonstrate the concept of 'templates' and 'style sheets' for websites. For each website we create first a header and footer that together form an HTML template that defines the basic layout and navigation. The template will then include one or more style sheets that define how each element is to be formatted - font, size, colour, alignment, etc.

So the appearence of a particular page then depends on:

• the site template (HTML);
• the cascading style sheet (CSS); and also
• the browser in which it is rendered;

The site template determines the layout of the page, while the style sheet determines how each element (headings, links, tables, ...) is rendered (formatted in your browser) in terms of size, format, colour, and sometimes even position. Because each browser uses slightly different rules for rendering HTML and CSS the result can vary between browsers.

Second level heading - Heading 2

At it's simplest, an HTML page consists of headings followed by paragraphs of text, images, lists and tables. The largest/most important heading is the 'H1' (Heading 1) followed by 'H2' and so on. Usually we don't go beyond 'H4' which is typically equal in size to regular text, but bolded.

CSS can affect the font, size, colour, alignment, borders and backgrounds, set the text to upper- or lower-case and (in newer browsers) apply transparency, text-shadows and other special effects. Applying these styles through a style sheet means that the HTML pages can be cleaner and more compact (hence faster to load and display).

Third level heading - Heading 3

As mentioned above, the style-sheet also determines how a link appears in terms of colour, underlining (yes/no), hover effect, etc. Links can have a different colour if they've been visited, or when you point at them.

Fourth level heading - Heading 4

Tables can also be formatted with different colours, font weights and border effects. The following table has a header followed by two rows of content. The text contained in the table has been styled using various simple HTML tags:

Using a template makes it much simpler to update you content - either using an HTML editor and FTP or working through a content management system (CMS).

(everything below this point is defined in the 'footer' of the site template)