tags:

views:

1367

answers:

24

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...

+5  A: 

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

saniul
+9  A: 

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.

Adhip Gupta
+3  A: 

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.

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

GateKiller
A: 

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.

Tom
+8  A: 

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.

Stephen Hendry
+1  A: 

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.

Antonio Haley
+2  A: 

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

happyappa
A: 

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.

abfo
+3  A: 

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/

Dennis
+3  A: 
Lance Fisher
+3  A: 

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]

HokeyWhiteBoy
I've got to agree. I was reading the O'Reilly CSS Book (<cite>Cascading Style Sheets: The Definitive Guide</cite>) and found it to be a good reference but a horrible tutorial. <cite>CSS: The Missing Manual</cite> is better-written as a tutorial, and lays things out in a much more accessible manner.
Schof
+2  A: 

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.

Dominic Cooney
+1 for this book. I've read every CSS book I can get my hands on and this is definitely one of the best.
Sam Murray-Sutton
A: 

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.

Jonas Follesø
+1  A: 
Sam Hasler
A: 

I would also look at CSS Tricks.

jtyost2
A: 

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.

Edo
A: 

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.

Huppie
A: 

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.

different
A: 

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.

Jeremy Kratz
A: 

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.

Nathan Long
A: 

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.

Jerph
+1  A: 

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

Umber Ferrule
A: 

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

Mert Nuhoglu
A: 

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

Rolcom Ld