About this template
This template mini-site provides HTML/CSS examples which can be used as the starting point for your own website or as examples to study. The site consists of several pages that document the HTML and CSS techniques employed within the site and the rationale behind them.
This template is styled in a tidy, aesthetically neutral manner and incorporates the University of Oxford brandmark. If you wish to create a simple website in the Oxford style, this template can be used with minimal adjustments. The main thing you'll probably want to do is replace the logo.png file in the images directory with an image of your own containing the name of your site. to do this, create a file with the same dimensions (400px x 120px), background colour (#ffffff - white) and filename (logo.png) and place it in the images folder. You can also make more fundamental style, colour and layout changes if you so wish; please see the section below which details the functional break-down of the various stylesheet files.
The pages in this template are marked up using the xhtml 1.0 strict version of HTML. This version of HTML was chosen because it focuses on a clear separation between content and presentation. This encourages mark-up to focus on providing information about the page content, while leaving presentational considerations to the CSS. See the Dealing with content section for more information on marking up content.
Each page in this template references five separate style sheets:
- basic.css - contains some basic style rules that are widely applicable to most pages.
- print.css - these styles will only apply when the page is printed (as specified when it is referenced in the head of the HTML file). This page contains styling suitable for printing, including hiding the navigation bar when printing.
- layout.css - this page contains all the rules for laying out the page, as such it is the most complicated. If you are happy with the basic layout, this file can be left alone.
- mainnav.css - this page contains all the rules for styling the navigational elements of the site.
- lookandfeel.css - contains some basic rules for the look and feel of the site (colours etc.) This is the file you're likely to edit the most.
There are two main reasons why the style rules have been separated into several files. Firstly, the type of media display to which the styles should be applied is specified in the HTML reference: basic.css is set to apply to all media, print.css only to printed media and layout.css, mainnav.css and lookandfeel.css to apply to screen display only. The styles relating to screen display have been further divided into three separate files to provide clarity of function, and also to facilitate reuse in a modular fashion. The mainnav.css file controls the appearance of the navigation; see the Providing navigation section for further details. The layout.css file controls the general layout of the pages, see the Structure and layout section for further details. The lookandfeel.css file is a more general purpose file; this is the appropriate place to add and change style rules in order to control the general look and feel of your site.