A friend of mine asked for tutorials and resources for CSS, so I complied the following list of sites. The cascading style sheet (CSS) spec (current version is 2.1) is published and maintained by the World Wide Web Consorium (W3C). The W3C also has a tutorial on CSS.
W3Schools is a good site with excellent tutorials for HTML, CSS, XHTML, among others. I learned HTML/CSS there — and then had to unlearn some things when I encountered problems in IE versus other browsers that more closely implement the W3C specs.
An easy way to play with CSS is to start with standards-compliant templates that work in a wide range of browsers.
- Two column templates
- Three column “holy grail” template
- Examples and templates, plus some good info on the box-model hack (thanks IE)
- Box Lesson for easy to use templates
- Layout Reservoir from Blue Robot
Get a good CSS editor like TopStyle from Bradsoft (http://topstyle4.com) that has a list of selectors as drop-down boxes — that way you don’t have to memorize things. There used to be a freeware version, TopStyle Lite, that provides a good starting point.
Western Civ, creators of Style Master CSS editor, has an excellent tutorial for CSS.
A List Apart is probably the best place to find information on best design practices and how to work around common problems. Cutting edge stuff by some of the best in the industry.
Eric Meyer’s home page has a great set of links for CSS references and related items.
Want to see what CSS can really do? Take a look at CSS Zengarden and CSS Vault. Some excellent examples of how CSS can completely change the appearance of a page by swapping the CSS without touching the page’s code.
CSS Layout for Fun and Profit (glish.com) also has great articles and information.
Once you have a CSS sheet created, it should be validated against the spec (this is also a great troubleshooting tool) by using the W3C CSS Validator.
If you really can’t find something, chances are that “Holy CSS, Zeldman!” has a link to it.
That should get you started… 🙂 Let me know if you choose to tackle inline CSS menus. That’s a whole separate post…
