CSS
Here are some interesting examples of CSS. I have put them in a logical order, if you are learning from a blank slate.
(Color coding: Beginner Intermediate Advanced)
Beginner
- W3 Schools: Good tutorial on CSS basics. (Their other tutorials are better, but this covers all the basic concepts.)
- Common Coding Problems with HTML and CSS: a nice summary of things that are easy to do wrong when you're just getting started.
- WestCiv.com's Learn CSS and Web Standards page is also a good starting point.
Intermediate
Advanced
- CSS Playground: one man's interesting experiements
-
CSS Zen Garden: a great demonstration of the power of CSS.
Here is a very cool counter-example: Bruce Lawson's "Geocities 1996" page - http://css.maxdesign.com.au/listamatic/index.htm: a great demonstration of the power of CSS.
- CSS Destroy: a good selection of ambitious stuff that doesn't work. Very interesting. Similar vein for Mark Schenk, who works with the moose. He has a list of other such sites.
- Rounded corners: some mostly unsuccessful techniques
For doing page layout, these resources are recommended:
- The Zen of CSS Design has the simplest and clearest examples of how to do this.
- http://www.tanfa.co.uk/css/layouts/
- H / DCD / F layout (in Italian)
- Glish.com: some example layouts
- BlueRobot layouts: some canned layouts
- CSS Creator: generates a layout based on your specific needs. I was not so successful with this site.
Interesting approach to encapsulating all the IE-specific hacks together in a nice package is here.
Undoing HTML is another useful concept, as captured in this file. Although the concept of consistency across web sites is important, it's pretty much been sent to Siberia by the graphic people. Most designers want to start with a clean canvas. I have come around to this thinking.
- Original Posting by tantek
- Nit picking by Eric Meyer