10 Best Resources for CSS

victorialever writes "Since one could have noticed an increasing number of websites that are employing CSS and an increasing number of resources talking about how great CSS is, it seems to become impossible not to jump on the CSS bandwagon as well. The 10 Best Resources for CSS provides an impressive list of the CSS resources which have recently become essential for web-developers. Among them - CSSZenGarden, The Web Developer's Handbook, Stylegala, PositionIsEverything etc."

Comments

CSS Cheat Sheet

[Sheriff Fatman]

May I also recommend Dave Child's CSS Cheat Sheet ?

Print it out & stick it on the wall/partition - it covers almost all the CSS you'll use day-to-day, and (IMHO) it's much quicker than digging through the online documentation or the O'Reilly book.

Similar things for Javascript, PHP, etc. are linked from here if you're interested.

can I add one?

[Anonymous Coward]

The edit css plugin for firefox lets you edit the css data for any page and instantly see the changes.

Best - NCDesign.org

[N8F8]

Awesome reference for HTML and CSS that shows examples and browser compatability:

• CSS
• CSS Property List
• HTML
• HTML Tag List

Re:No CSS on that site.

[Bogtha]

It's still easier to do certain things with table-based layouts than it is with CSS alone. Control of vertical positioning/height being the obvious one. That and fluid layouts.

Okay, vertical positioning, I'll give you. But fluid layouts? That's not hard at all. Websites are fluid by default, they only stop being fluid when you set explicit widths using fixed units. You can do that with CSS or tables.

If you're a busy designer, sometimes you just have to take the pragmatic route rather that waste hours or days trying to make a pure CSS layout work across all the common browsers

If you are an experienced designer, then you've already done similar layouts a hundred times before, so you have the code and bug workarounds memorised and making it "work across all the common browsers" is at the very least least as easy as dumping a load of table code into each page.

Either that or (worse) you compromise the design to make it fit the limitations of a pure CSS layout.

I think the latter approach accounts for the huge number of 'identikit', bloggish-looking sites out there

Er, CSS is far less limited than tables (check out the CSS Zen Garden), and I've seen way, way, way more websites out there using tables that all look alike.

The reason most weblogs look alike is because they come with a set of default templates that people don't tweak very much.

It's still perfectly possible to create valid, semantic XHTML/CSS markup that uses the odd table for layout

Er, no. Not semantic. Not at all. If you are using tables for anything other than tabular data, it's not semantic.

While I'm all for standards and separating content from presentation, at this stage of the game, we just need to choose the solution that works best.

At any stage of the game you need to choose the solution that works best. In my experience, switching to CSS saved me a whole lot of time that was spent dealing with cruddy code. Sure, in the beginning, that extra time was wasted on stuff I didn't know about CSS, but once I got a bit of experience, it was a real time-saver.

I know it's probably heresy to say this, but IMO tables work in an intuitive way that you can easily visualize whereas a mass of floated DIVs often do not!

I've heard that before. Exclusively from developers that have years of experience with tables and who haven't spent any significant amount of time with CSS. Once they spend a week or two coding CSS every day, they wonder how they did without it. And if they never had much experience with tables in the first place, they don't want to bother with all the crap associated with tables (counting rowspans is never intuitive).

Really, just think about the difference involved in "just move that over to the right a bit" for the two approaches. With tables you have to insert an extra column, count rowspans, if there's any rows spanning across the whole layout you have to break for that, alter its colspan and put another cell below it with rowspans... and with CSS, you open up the stylesheet and change one number.