CSS Examples

These examples use valid XHTML and CSS, are visually consistent across all V5+ browsers (Mac and PC) and their content is accessible to both legacy and text only browsers. Access keys are highlighted in the link names.

Please note: all designs and associated graphics are copyright 2003-2005, Darren Gash, apart from the Language School example which is copyright 2003 Centropuchini, with all rights reserved. All CSS code may be freely studied and used elsewhere. The examples were originally published for the benefit of Creative Media Students at SAE Institute London

"Wierd World Wildlife" Homepage

Demonstration of how CSS can apply graphics to a design. The XHTML file has no embedded graphics, and an image replacement technique is used so the title graphic is readable as text should images be disabled. The page also has a print style sheet.

Disjointed Rollovers

Demonstration of how CSS, as an accessible alternative to Javascript, can be used to create disjointed graphic rollover effects.

Photo Album

The site demonstrates a range of CSS techniques including the use of floating elements for page layout and thumbnails, and a drop shadow effect without the use of background images. Please note: only the South America/Rio de Janeiro section of the site is fully functionable.

Zoomable Web Site

All values used in the CSS are relative, enabling the layout to resize in proportion to the font size.

Centropuccini Language School Site Optimisation

This is a prototype for a project to provide an optimised version of a commercial website. The main brief was to reduce the page weight by over 50% whilst retaining the existing look and feel. The project was shelved and is now used for educational purposes only. Please follow this link to see the original version. You can also Download the draft project brief in PDF format. Note that Javascript has been used to emulate CSS min-width function for Internet Explorer.