Brought to you by Layout Master page layout editor

Some Major Links for Cascading Style Sheets Resources

This isn't the definitive list for CSS resources. For the comprehensive CSS pointers, see the CSS Pointers Group. This list features the standout and most important resources, tutorials, references and help for a style sheet developer.

Comprehensive Information

Cascading style sheets are an initiative of the World Wide Web Consortium (W3C), so where else to learn more about style sheets? Here you'll find

  • the specification (in its purest form, though there are more readable versions available, see below)
  • latest news about tools, browsers, and resources
  • information about all the latest and upcoming developments in the world of CSS and accessibility
  • the browser test suite
  • the CSS lint. Make sure that your style sheet is perfectly valid.

They also have information about aural cascading style sheets.

The CSS Pointers Group are just about the bees knees when it comes to resources, as well as links to other stuff online. Get yourself over there now! Now includes an FAQ compiled by members of the style sheets newsgroup.

Sizzling HTML Jalfrezi has an excellent and well-organised CSS section. It includes one of the only CSS FAQs I've seen, as well as the specification in tabular format.

The Web Design Group dedicates a department to style sheets. Featuring

  • tutorials
  • articles

CSS Superexpert has all kinds of CSS resources including a mailing list, articles, books, an FAQ, and even a job search facility!

The About.com features an in-depth section on style sheets. Check it out.

The people at Glassdog have a beautiful site that includes a nice little introduction to style sheets and why you should use them.

Jeffrey Zeldman has some handy style sheets resources. Of particular interest

  • at Ask Doctor Web there is a really nice pragmatic introduction to style sheets and how you can start using them today.
  • Fear of Style Sheets is a neat article that talks about how to overcome this fear, and most importantly, help your clients to do so as well.

And take a look at the other side of the coin as well. What's wrong with the FONT element? and <FONT FACE> considered harmful are excellent articles explaining the perils of presentational markup.

Jakob Nielson's Effective Use of Style Sheets, while a little old now, still has some really good practical tips and things you should do if you want to start working with style sheets in your site.

Jan Roland Eriksson's Basic "old timers" typesetting practices is a fascinating page which links together traditional typesetting ideas, terminology and so on with CSS. If you don't know much about words like "leading" and "x-height" this is a great place to start.

C|Net's builder.com as you would guess features a style sheets department. They include

  • articles
  • reviews
  • tutorials
  • resources

Web Design Group has a collection of CSS resources that may be of particular interest to some, because they are available in Japanese and Chinese as well as English.

Web Developpeur has a collection of style sheets (feuilles de style) resources that are in French.

The Web Worker's ToolBox has a very comprehensive coverage of CSS issues including real-code examples of all the properties, exercises, software reviews and more.

Pankaj Kamthan maintains a Cascading Style Sheets Site which is chock-full of handy resources.

Web-Building has a thorough listing of CSS resources.

Index DOT CSS is another comprehensive site which also covers the history of cascading style sheets.

The HTML Writer's Guild has loads of information about CSS mainly in an FAQ form - - very useful.

Ralph Sutter has a CSS Help Page. Of particular interest are his Test Cases to demonstrate CSS, where he shows some of the things that can easily be done along with the actual CSS code used to do it.

Web Review has a section devoted to CSS. Here you'll find

  • excellent and timely articles on introductory and advanced CSS matters
  • a mastergrid of CSS1 and CSS2 (Selectors) support in web browsers
  • an FAQ and overview of the CSS1 Spec.

Web Monkey, the department of Hotwired dedicated to web development has a section covering style sheets. It also features

  • tutorials, including a new tutorial on CSS and IE5
  • reviews of tools
  • articles

Chris Croome's style sheets pages are a great example of what you can do with style sheets in themselves. Have some fun experimenting with the different style sheets he makes available.

Tutorials and Guides

If you're still scratching your head after looking at The House of Style's tutorials and handbook, then there are plenty of others available from these web sites and e-zines.

  • Bert Bos and Håkon Wium Lie, the developers of the CSS language, are kind enough to make some of their book Cascading Style Sheets, designing for the web available online. Of particular interest for someone wanting a practical introduction to writing style sheets is Chapter 2.
  • Eric Meyer, author of Cascading Style Sheets: the Definitive Guide has this article about starting out with style sheets that is both amusing and instructive.
  • D.J. Quad's Ultimate HTML Site has a quick tutorial that offers a good starting point for CSS beginners.
  • Marcus Kazmierczak at Web.Blazonry has a well organised CSS tutorial that cuts to the heart of what CSS is and takes you through all the basics of what you can do with it.
  • HTML.it have a really comprehensive Italian CSS tutorial, along with an FAQ which is also in Italian.
  • Graphixland has a really nicely organised collection of quick CSS lessons as well as browser compatibility information.
  • Urban Frederickson has written a very practical introduction to style sheets based on his own experiences in coming to grips with using them.
  • The Slackers Guide to Style Sheets from the people who brought you the Slackers Guide to HTML is a good place to start if you don't want to bog yourself down in the technical stuff early on.
  • <HTMLSTYLE.COM> has a handy CSS tutorial section including a CSS reference.
  • Page Tutor, along with other easy to understand HTML resources, has a CSS Primer.
  • WebReference has a Style Sheets Guide that explains the ideas behind CSS, and the basic principles you'll need to get started.
  • Jan C.H. Weijers has a comprehensive guide to style sheets that covers the whole specification.
  • HTML Style.COM has a CSS tutorial and guide as well as browser compatibility information. I also like their CSS Color Tester, which you can use to quickly see how different color combinations for your link states will look before going to the trouble of actually creating them.
  • Writing CSS1 Style Sheets by Urban Fredriksson not only tells you how to use style sheets, but also offers some more good reasons why you should use them.
  • W3Schools has a comprehensive CSS tutorial that covers both properties and selectors in detail. They also have a neat little CSS reference table
  • Digital Authors has a step-by-step CSS tutorial that will help you get started with the basics. Also includes a CSS reference.
  • Robert Crooks also covers all aspects of using CSS, as well as some special browser-specific CSS tricks like filters and overlays.
  • FlamingoLingo has a collection of CSS tutorials, covering the basics as well as some cool little recipes. These include working with the <BUTTON> tag and CSS, cursor control, and their own Top 10 (Cheap) CSS Tricks.
  • Elated Communications have a quick CSS Tutorial that will help get you started, as well as lots of other handy HTML resources.
  • The Web Developer's Virtual Library has a tutorial as well as an introduction to what's so good about cascading style sheets and why you should use them.
  • WebReference's tutorial HTML with Style includes a discussion of one of our own favorite subjects, separating structure from presentation.
  • HTMLCenter has a very comprehensive introduction to CSS along with lots of other tutorials on specific CSS topics such as fonts and cursors.
  • WebDeveloper also has a Guide to Cascading Style Sheets.
  • WebMasterBase has a quick introduction to CSS, and also a nice little tutorial that will quickly show you how to do some basic CSS tricks without learning much about the technology.
  • Raphael Pirker's Web Resources also has some tips on quick CSS tricks, including font embedding, working with cursors and CSS buttons.
  • The WebWorks team also have a handy little tutorial to get you started in no time.
  • Builder.com has a CSS tutorial that also includes their "Style-O-Matic", a little javascript application that lets you preview what your CSS properties will look like.
  • Roger Jones' Worked Example of a Style Sheet takes you through the steps of creating your first style sheet.
  • Although I haven't been able to read this page, it appears to be an extensive CSS Tutorial in Russian.
  • The Back to Font Web Color Picker isn't actually a tutorial, it's a nifty little tool that helps you quickly preview what a style sheet will look like, and also copy the style sheet code you've previewed and paste it into your actual style sheet. Well worth a look, for quickly seeing what your page is going to look like, without having to fiddle with the code.
  • The HiTMilL's Introduction to CSS outlines the basic ideas behind CSS and explains the differences between external and inline styles particularly clearly.
  • HTML 2000 has an Intro to CSS Tutorial that will show you how to create a basic first style sheet and integrate it into your site.
  • Digital Authors have a CSS Overview that use the framework of the CSS Specification to create a handy tutorial.

Checking your Style Sheet

You know how fussy the major browsers are, so to give yourself the best chance of making your style sheets work, make sure that your syntax is correct. You can check the correctness of your style sheets with the following tools.

The Web Design Group's CSSCheck at

http://www.htmlhelp.com/tools/csscheck/

The W3C's CSS Lint at

http://jigsaw.w3.org/css-validator/

The Specifications

The specifications for Cascading Style Sheets 1 and Positioning are available from the World Wide Web Consortium at

http://www.w3.org/Style/css/

Western Civilisation has a version of the CSS 1 specification that includes links to our guide, and to our browser compatibility chart. Helps you make sense of a sometimes daunting document.

http://www.westciv.com/style_master/academy/the_specification

Project Cool has a hypertext overview of the specification at

http://www.projectcool.com/developer/cssref/index.html

Browser Compatibility

Western Civilisation, the developers of Style Master, have a thorough, and annotated guide to browser compatibility. It explains what is supported, what isn't, and most importantly, what the pitfalls are for every aspect of style sheets.

The definitive reference to what works, when and how is http://www.webreview.com/guides/style/mastergrid.html from Eric Meyer and Web Review. This now features annotations to explain the limitations in detail, and to suggest work arounds.

Project Coolhttp://www.projectcool.com/developer/reference/css_style.html also has a property by property overview of what works in which browsers at

You can also take a look at Matthew Haughey's Little Shop of CSS Horrors, which takes a look at "the darker side of CSS rendering".

(C)1997-2001 Western Civilisation Pty. Ltd.