Create Your Own Stylesheet

Introduction

This website makes use of CSS for presentation which is layed upon semantic, structured HTML. This site also has a stylesheet switcher which allows different styles to be applied across the site. There are numerous predefined styles which have been developed for the site, based upon famous designs from across the web. The style sheet switcher allows for external CSS to be applied, this article will document the basic structure of the HTML for reference when creating your design/CSS file.

Appy Your Style

To apply your own stylesheet you simply point your browsers to http://university.trovster.com/final/switcher.php?set=URL and set URL to the domain path to the appropriate CSS file. The CSS selected will then be applied as the main stylesheet and you will be redirected to the homepage of the site.

A simple stylesheet loader has been provided for convenience. Simply provide the URL to the CSS file and it will apply the stylesheet.

Know The Structure

In order to easily create an effective layout you first need to understand the markup behind the site. Here you can find an outline of the main ids and classes on the page and how they are nested. Finally, you can find out about specific markup for special sections and menus.

body id="page-id-"

div id="container"

<ul id="skip_links">

<h1><span></span></h1>

div id="navigation"

<ul>
<li class="active"><li>
<li class="last"><li>

div id="content_container"

<h2><span></span></h2>
<p id="print_preview"></p>

div id="content"

<h3><span></span></h3>
<h4><span></span></h4>

div id="sub_information"

<h3><span></span></h3>

<ul id="articles">

div id="footer"

<ul>
<li class="active"><li>
<li class="last"><li>

Site Section Styles

Each section can be reference individually with the page id. Below is a list of all the different page ids.

page-id-home
page-id-web-standards
page-id-web-accessibility
page-id-development-articles
page-id-interviews
page-id-references
page-id-colophon
page-id-glossary
page-id-copyright-information
page-id-accessibility-statement
page-id-sitemap

To access certain elements on specific section the following example can be applied:

#page-id-home #navigation
{
	styles
}

<body id="page-id-home">
...
<div id="navigation">

Sub Menu

Each sub menu on the main five sections of the site can be referenced using id="articles".

Page Specifics

The Homepage

The homepage has an extra div within id="content_container" called id="content_2". This is below id="content" and before id="sub_information.

Interviews Section

The introduction about the interviewee is marked-up with <p id="intro">, followed by:

dl id="interview"
<dt id="q1"></dt>
<dd><p></p></dd>

Where id="q1" increases per question, up to id="q10".

References Section

The list of WCAG checkpoints is an ordered list with id="checkpoint_summary". This is then followed by the following table:

table id="checkpoints"

tbody id="checkpoint1"

<tr>
<td></td>
<td class="desc"></td>
<td></td>
</tr>

tbody id="checkpoint2"

<tr>
<td></td>
<td class="desc"></td>
<td></td>
</tr>

This is repeated until the last checkpoint, id="checkpoint14".

id="entities" is to reference the character entities table. Every other row has class="odd".

Quotations

All quotations are marked-up in the following way:

blockquote cite=""
<p></p>
<p><cite><a href="" title=""></a></cite></p>

Multiple paragraphs within the quotation are allowed.

Unrestricted Access

Development Articles