General CSS Sites

CSS browser compatibility chart: http://www.centricle.com/ref/css/filters/?highlight_columns=true
microsoft CSS gallery: http://www.microsoft.com/typography/css/gallery/
CSS from W3C: http://www.w3.org/Style/CSS/
guide to CSS from the Web Design Group: http://www.htmlhelp.com/reference/css/
CSS exercises: http://codepunk.hardwar.org.uk/acss.htm
SitePoint on CSS: http://www.sitepoint.com/search/search.php?ps=10&q=css&submit=Search
info from Stylesheets.com: http://www.highdots.com/css-editor/css_tutorial/units.html
CSS panic guide: http://www.thenoodleincident.com/tutorials/css/index.html
CSS from Layout-o-matic: http://www.inknoise.com/experimental/layoutomatic.php
Setting the minimum width of a web page, (see point 3 on the page): http://www.webcredible.co.uk/user-friendly-resources/css/more-css-tricks.shtml
Listamatic pages on creating vertical and horizontal lists: http://css.maxdesign.com.au/listamatic/index.htm
Position Is Everything: http://www.positioniseverything.net/index.php
CSS Specificity Calculator: http://www.suzyit.com/tools/specificity.php

Tutorials

CSS Basics: http://www.cssbasics.com/
CSS tutorial from the W3 Schools: http://www.w3schools.com/css/default.asp
A couple of tutorials from Westciv: http://www.westciv.com/style_master/house/tutorials/index.html
CSS tutorial on positioning page content: http://www.brainjar.com/css/positioning/default.asp
3-column layout using CSS: http://www.pmob.co.uk/temp/3colfixedtest_4.htm
The Perfect 3 Column Liquid Layout: http://matthewjamestaylor.com/blog/perfect-3-column.htm
one of the best resources around for css positioning: http://glish.com/css/
A video tutorial from SitePoint (with sound): Introduction to CSS: http://www.sitepoint.com/videos/get/videocssintro1/
A video tutorial from SitePoint (with captions): Introduction to CSS: http://www.sitepoint.com/videos/get/videocssintro1/captions/
A collection of video tutorials on CSS3 which are free to access (with exception of "master classes"): http://membership.thinkvitamin.com/library/css3

Website Design Ideas

Zen Garden: http://www.csszengarden.com/
Eric Meyer on design: http://meyerweb.com/eric/css/edge/
Design ideas from Smartywebby: http://www.smartwebby.com/web_site_design/design_ideas.asp
Layout Gala: A collection of 40 CSS layouts based on the same markup and ready for download: http://blog.html.it/layoutgala/#details
Site Designs from the Web Design Consultancy service offered by Oxford University Computing Services: http://www.oucs.ox.ac.uk/webdesign/resources.xml
Free standards compliant templates based on XHTML strict: http://www.freecsstemplates.org/css-templates/
Web Style Guide: http://www.webstyleguide.com/

Colour picker

Useful resource to help choose a colour scheme for your web site: http://colormixers.com/mixers/cmr/
Accessibility colour wheel for your web site: http://gmazzocato.altervista.org/colorwheel/wheel.php
Choose foreground/background colours for text using the Colour Contrast Analyser: http://www.nils.org.au/info.aspx?page=628#using
A colour contrast check interface similar to the CCA above: http://www.snook.ca/technical/colour_contrast/colour.html
A colour theme generator and repository from Adobe Labs. You will need to create a free Adobe account if you want to download any of the themes: http://kuler.adobe.com/
A colour scheme generator from Well Styled: http://colorschemedesigner.com/
This is an excellent resource on colors and the web, providing color names, the web safe palette, and more than 500 colors that are commonly used today: http://cloford.com/resources/colours/index.htm
This site provides information on color theory for web designers to assist in the correct scheme choices: http://www.colorsontheweb.com/
Web page colour tips: http://www.printerinks.com/web-page-color-tips.html

Web Browser Testing Sites

Web broswer emulator: http://www.dejavu.org/emulator.htm

A good site. Down side - it's not free: http://www.browsercam.com

Anybrowser.com: http://www.anybrowser.com

Font Related Sites

The TypeTester site gives you an interface that allows you to apply any conceivable text options to three columns of text; you can compare the display side by side. Once you have some setting you like, you can click on the Tools tab to obtain the CSS that creates the effect.

Pixels to Ems Conversion Table for CSS: http://jontangerine.com/silo/css/pixels-to-ems/
EM Calculator: http://riddle.pl/emcalc/
Font Size Checker - Percentages Vs Pixels: http://www.sibagraphics.com/font2.php

CSS Developer Toolbars

With these toolbars installed, you can view the style sheet(s) of any site on the Web.
Great for answering the question "how did they do that?"

For Internet Explorer, (Note: These toolbars can be used together to give a complete set of tools)

From Accessible Information Solutions: http://www.nils.org.au/info.aspx?page=544
Microsoft's own version: http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038
From the Paciello Group: http://www.paciellogroup.com/resources/wat-ie-about.html

For Firefox

From Chris Pederick: http://chrispederick.com/work/firefox/webdeveloper/
Firebug: http://getfirebug.com/
FireScope: A firefox add-on that integrates with Firebug to extend the reference material for HTML and CSS: http://tools.sitepoint.com/firescope/

CSS Editing Software

Both FrontPage and Dreamweaver have built-in editors but I prefer to use this program as an add-on to Dreamweaver.

Windows

TopStyle Lite from NewsGator, (formally known as BradSoft): http://www.newsgator.com/NGOLProduct.aspx?ProdId=TopStyle&ProdView=lite

Mac OS

*StyleMaster: http://www.westciv.com/style_master/
CSS Edit: http://macrabbit.com/cssedit/
*Simple CSS: http://www.hostm.com/css/

*Also available for Windows

Oxford University Sites

The toolkit can be viewed at the page below: http://www.ox.ac.uk/branding_toolkit/index.html
Web Strategy Group: http://www.ox.ac.uk/web/

Mail Lists

CSS discuss mail list: http://www.css-discuss.org/about.html
Subcribe to the Oxford University web managers mail list by sending an email to: web-managers-discuss-subscribe@maillist.ox.ac.uk

The latter is aimed at people responsible for the web content of their unit, and encourage a network of mutual support between those involved in web work of any kind.

Useful Web Design Links: Cascading Style Sheets, (CSS)

Contents