Can you recommend a good CSS online resource or book?

Question

Are there any favorite online references or good introductory and intermediate/advanced books on this topic that you'd recommend?

The backstory is that I'm working on a web development project that is "re-skinning" our existing web site to make it more usable and visually appealing given current technologies that either weren't available or widely adopted as the site evolved (over the last ten-plus years). Of the new technologies and methods, CSS, although not really all that new, is the most interesting to me because it is clear that it has great power beyond simple styling of fonts and colors - and, as the saying goes, "With great power comes great responsibility." In other words, it is (now) clear to me that CSS is more than a way to apply a look and feel to page markup but is a way to apply behaviors to web pages. So it seems to me that it will be required to understand at a fundamental level "how CSS works" not so much from a page designer's perspective but from that of a programmer or software engineer in order to find and correct "bugs" in the behaviors of a given web page.

So, I'm looking for a place to start...

Answer 1

Basic CSS Tutorials

Some more Basic CSS

Some more tutorials

Advanced CSS

Advanced CSS Layouts: Step by Step

All websites listed here have links to similiar resources, I'm sure you find something that will suit your needs

...and this looks like THE book

Answer 2

Well, if you are looking to fix bugs, I would recommend you going through http://www.quirksmode.org/. This website has a comprehensive list of different browser 'quirks' and loads of other CSS resources.

Answer 3

I'm going to point you in the direction of a few websites which read and have been very valuable to me in learning CSS. The articles in the following sites cover a range of topics which will help you learn and also be inspired by.

• http://24ways.org/
• http://www.456bereastreet.com/
• http://www.alistapart.com/
• http://www.addedbytes.com/

I also have a wide range of links via my Delicious http://delicious.com/GateKiller/css

Answer 4

I'd like to add that if you're just starting to get familiar with CSS, it is absolutely imperative that you have IE6, IE7, Firefox, Safari, and even Opera running on your local development box. Not all browsers interpret CSS the same way and I'd hate for you to have a beautiful site in Firefox only to see IE barf it back up.

Every developer will have his/her own way of working with CSS, but one thing I've always done is implement some styles, then hit the page in each browser. If it looks good, proceed; otherwise, I fix that style until it works correctly.

Additionally, strive for valid CSS (you can check it with this tool: http://jigsaw.w3.org/css-validator/#validate-by-input) but know if that it's possible in order to get the site to behave properly in IE6 and the other browsers, you may have to break validation.

Either way, these are just some general tips I thought I'd throw out there.

Answer 5

SitePoint CSS Reference is a good place to start. Covers most things that you will need to know. There is a review on Slashdot giving the book version 9/10.

Answer 6

Whenever I do anything on the web I usually have w3schools.com at hand. It's not the best place for reference but it is the most comprehensive.

Answer 7

CSS Zen Garden - Learn by example, learn by doing

Cascading Style Sheets The Definitive Guide - Nice O'Reilly reference

And yeah, as mentioned by others w3schools.com

Answer 8

For an introductory book I'd look at Head First HTML with CSS & XHTML. I've stumbled through building various websites and this was the first book I read that really clarified CSS.

Answer 9

I would have to say as a book Site Point - The Ultimate CSS Reference is a great resource that I use.

The Ultimate CSS Reference is the definitive resource for mastering CSS. The entire language is clearly and concisely covered, along with browser compatibility details, working examples, and easy-to-read descriptions.

http://www.sitepoint.com/books/cssref1/

Answer 10

• Transcending CSS is an excellent book, but it's not for beginners.

• Web Standards Solutions is a good beginner book.

Answer 11

Don't waste a minute of your time... just get hold of a copy of

CSS: The Missing Manual - http://oreilly.com/catalog/9780596526870/

It is the ONLY CSS resource you will need. The guy speaks english, explains exactly how to do the right thing (as examples, rather than just giving you a list of tags with descriptions) and then tells you the few-line hack you need to throw in so that it works in IE.

I learnt more from that book, in the shortest period of time, then any other programming book EVER.

[edit] SCRIPTING BOOK! God, heaven forbid CSS be called a programming language![/edit]

Answer 12

CSS Mastery concisely explains the fundamentals of CSS. Its presentation of the box model is great. It also covers a couple of popular techniques (like rounded-corner rectangles and "liquid" layouts) and browser-specific hacks--so it is a good mix of theory and pragmatics.

Reading this book definitely helped me escape from "edit, F5, repeat" CSS development and be able to predict how stylesheet changes will affect a page. CSS development is much faster when you can look at a broken layout and know what aspect of a stylesheet will likely need to be changed, instead of commenting out style rules or digging through Firebug (although sometimes that is appropriate too.)

If you are a member of the ACM Digital Library the full text of the book is available online there.

Answer 13

Web Standards Creativity - Fantastic book. Written by a group of CSS/Web Standards Experts who do one chapter each, focusing on some aspect of CSS and standard basted design.

Answer 14

I would also look at CSS Tricks.

Answer 15

I wholeheartedly recommend "Stylin' with CSS" by Charles Wyke-Smith. This book is both a great introduction to CSS, and a very good resource for tackling more complex CSS problems.

Answer 16

Next to some of the great books I've seen here I think you should always be able to fall back on the spec itself. It's not the starters' guide but gives valuable information about quirks and how browsers align or calculate margins.

• CSS 1.0
• CSS 2.1
• CSS Current work

Answer 17

I'd definitely go with the Holy Grail of CSS links. All the CSS resources in one place.

I'd also like to second 'Transcending CSS', it's just a fantastic resource and the photography and style of the book is such a departure from most other publications.

Answer 18

Jeffrey Zeldman's Designing with Web Standards is a great web book. It's not specifically focused on CSS; it's more of an explanation of why you should use XHTML and CSS when designing a website.

Answer 19

I learned CSS from CSS: The Definitive Guide" by Eric Meyer (published by O'Reilly). I'm not sure if it's the best tutorial, but it does go into detail about each bit of the standard. In particular, it helped me understand the CSS box model and rules for applying and inheriting styles. It's a good book to have as a reference.
As a disclaimer, I find that how CSS should work and how it does work cross-browser (IE6 especially) are often very different. So I often have to search the web for hacks, which is very frustrating.

Answer 20

I often use the Web Developer's Handbook when I'm looking for something new to read. It has an up-to-date list of resources for all aspects of web development, including design. Currently nearly 1000 links.

Answer 21

I frequently use this as a quick reference: HTML Dog - CSS Properties.

Answer 22

Authors from CSS Discuss mailing list maintain a comprehensive wiki site. The wiki covers a lot of useful materials, from the theory of CSS to the practical hacks and tools. The mailing list is maintained by Eric Meyer.

Also I really found very useful refcards from dzone for rapid introduction into the theory and practice of CSS. They have published 3 CSS refcards upto now:

Core CSS I

Core CSS II

Core CSS III

Answer 23

All depends on the level of tutorials you need. I can recommend http://phpforms.net/tutorial/tutorial.html