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

No CSS on that site.

[McDutchie]

Anyone taking even a cursory look at the sitepronews.com article source code can see that the layout is done with the usual mess of tables.

Re:No CSS on that site.

[BishonenAngstMagnet]

But we all know that it can be fixed...

Re:No CSS on that site.

[iBod]

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.

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 (none of which implement CSS 100% correctly anyway).

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 (all proudly displaying their little W3c validation logos of course).

It's still perfectly possible to create valid, semantic XHTML/CSS markup that uses the odd table for layout (no, I don't mean a heap of nested ones with spacer gifs!).

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.

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!

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.

Re:No CSS on that site.

[arkanes]

It isn't valid semantic markup if you have to nest everything in 18 layers of divs and spans to convince a browser to apply your CSS rules correctly, either. There's nothing "less" semantic about using tables instead, and there's some serious advantages - like the fact that all major and most minor browsers will render them identically, that they're far more intuitive, and that they allow re-flowing in a way that you can only do with CSS attributes that are explicitly designed to mimic the layout algorithms of "traditional" tables. Which, of course, IE doesn't implement. And much as it'd be nice to simply use the tags anyway, as a practical matter you can't simply ignore IE unless you're creating a special purposed or otherwise private web site.

HTML is not a semantic markup language, hijackers in the W3C not withstanding. It's a rich text markup format. It always has been. XML is (well, can be) semantic markup, and if you really want to store your pages semantically, use XML (with no styling at all), and transform them with XSLT. Dispense with the ridiculous concept of "semantic HTML", which is useless in practice and almost useless in theory, and try using the correct tools for the right job - XML for storing your content, and HTML for presenting it.

Re:No CSS on that site.

[schon]

there's some serious advantages - like the fact that all major and most minor browsers will render them identically, that they're far more intuitive, and that they allow re-flowing in a way that you can only do with CSS attributes that are explicitly designed to mimic the layout algorithms of "traditional" tables

If you really believe all of this, then I don't think theres hope for you... unless you define "major and minor" browsers as "IE". Tables get rendered differently by different browsers, just like CSS gets rendered differently.. the only thing is that it's easier to work around CSS bugs

CSS is *WAY* more intuitive than tables ever were (and there's a reason - because it's designed that way.) You use DIVs to define blocks of code, then use CSS to say how you want them positioned. With tables, you have to screw around with row and column spans *in the HTML itself*.

It's pretty obvious that you prefer tables because you've spent a lot of time learning their quirks - don't slam CSS just because you don't know how to use it properly.

try using the correct tools for the right job

If you really believed this, you'd be using CSS.

Re:No CSS on that site.

[arkanes]

Table layout algorithms have been essentially identical in all major browsers for at least 4 years. CSS layout, on the other hand, has at least 4 years to go before it's anywhere close.

I've been using CSS for many years. I've been using tables for many years, too, but don't mistake the fact that I'm aware of deficencies both in the CSS stndard and in it's imlpementations for a lack of knowledge. And the fact that you're telling me I need to use blocks of DIVs to layout my stuff is telling me that you're just another blind herd following CSS monkey, rather than anyone who can actually evaluate the usefullness and appropriateness of claims like "semantic markup". There's no excuse for telling someone to replace thier tables with divs "just because".

And just because you managed to find some stylesheet on a CSS site that you use blindly to work around certain CSS bugs (no doubt without realizing that the stylesheet itself relies on other bugs to work correctly, and the widespread reliance on these bugs is a major obstacle to the uptake of correct CSS implemetations in IE), doesn't mean that CSS incompatibilities are easier to work around than the practically non-existant table ones.

Re:A list of the site links?

[BishonenAngstMagnet]

http://www.csszengarden.com/ http://www.alvit.de/handbook/ http://www.wpdfd.com/editorial/basics/index.html http://www.w3.org/TR/REC-CSS2/ http://css.maxdesign.com.au/listamatic/ http://www.cssvault.com/ http://glish.com/css/home.asp http://webhost.bridgew.edu/etribou/layouts/index.h tml http://www.positioniseverything.net/ http://www.stylegala.com/

Counterstike

[flamearrows]

Please don't let me be the only one who saw the title and immediately though Counterstrike: Source...

Re:But they forgot..

[RangerRick98]

Interesting; the article I read has that site listed third as "Official Cascading Style Sheets Level 2 Specification."

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.

CSS Sidebar for Mozilla/Firefox

[superflippy]

I find the CSS Sidebar immensely useful. It lets me quickly look up a style and see what values it takes. It's also a good reminder of some of the little-used styles.

The REAL news ...

[ggvaidya]

from the slashdot-is-moving-to-css-in-just-a-few-weeks dept. ...

Is that for real? Not been having much problems which Slashdot recently, but if they're chucking away their mess of tables ... the apocalypse might be at hand after all! Yippee!

Re:The REAL news ...

[dancallaghan]

Yeah about time too ... I mean, CSS has only been around for almost nine years ...

Re:The REAL news ...

[SnowWolf2003]

Looks like it is for real

See CmdrTaco's journal

Best - NCDesign.org

[N8F8]

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

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

Bookmark this page

[jurt1235]

A lot of other CSS sources are already being quoted now, better start bookmarking this /. article then.

CSS tables

[Richard W.M. Jones]

Yes, a few sites are now using CSS. But often, they still don't "get it" - they've just replaced with to arrive at a mess of divs, instead of a mess of tables. We call this "CSS tables".

Structural markup is the essential differentiating factor, not just that you have found out how to replace tables with divs ...

</rant> over.

Rich.

Re:CSS tables

[Richard W.M. Jones]

Why? I really don't understand this, what's wrong with divs?

So that your site works in older browsers. - If it's just a bunch of nested divs, it'll collapse into short lines of text on an older browser.

So that your site works in text-only browsers. Not just some Unix reprobates using Lynx, but people using mobile or otherwise "reduced" devices.

So that a speech reader (an accessibility device used by the millions of partially sighted and blind people in the world) can stress the structure of the page when reading it, which helps the visitor to understand how it is laid out even when they can't see it.

So that you can easily retarget content just by changing the stylesheet or (better) providing device-specific alternate stylesheets.

So that search engine spiders can understand the structure of your page - eg. they can identify the important headings.

So that you don't forget what elements in your site mean.

That's just off the top of my head.

Rich.

Re:CSS tables

[Millennium]

Why? I really don't understand this, what's wrong with divs?

Nothing is inherently wrong with divs, as long as you keep in mind that divs don't mean anything, and that a meaningful tag is always preferable when one is available.

To illustrate this, let's look at some common page-design tasks. Suppose that you want your page's title (which you'll type in text) and an image to appear at the top of your page. Many people would tell you to use a div with an id of 'head' to wrap everything, but there's a better way: simply use an h1 tag and give it a background and background-image. By using a meaningful tag for your page header, you've cut out excess HTML code, and the result is more elegant.

Let's say, however, that you want more than just text and an image in your header. Suppose, for example,that you want to do something like Slashdot, using text, an image, and more images representing the last several categories that have been updated. There is no one tag that can encompass all of this, and so here we have a case where a div is appropriate. Give it a meaningful ID -'header' is a common choice- and put your header elements inside it.

The rule for elegant code is to use the most meaningful tags which will do what you want. DIV tags are suitable when nothing else is available, and there are times when that happens. However, they should not be used when better tags exist.

CSS Zen Garden styles

[AaronLawrence]

I find it interesting that none of the CSS ZenGarden style sheets I tried resized at all with the browser window, and most of them coped poorly or not at all with large text (many became unusable).

Take a step back and re-evaluate CSS

[Loundry]

I'm a programmer who has been thrust into the world of CSS and been on many occasions quite frustrated with it. It seems arbitrary, arcane, and particularly difficult to debug. On top of that, it seems to have a set of zealots who defend it (and demand it) with bitter viciousness.

I had concluded that CSS was "programmer-friendly" in the same way that a rusty jigsaw was "penis-friendly".

I recently picked up a book entitled _Designing with Web Standards_ by Jeffrey Zeldman. It's a good an honest resource, and he even claims to avoid zealotry. But, in the book, he examines a particular website, one with a plain-jane two-column appearance, which he said took "three CSS experts" to re-code from tables to CSS layout. Not three CSS advocates, three CSS *experts*. On top of that, their "solution" turned out to be a hack.

Honestly, what success am I supposed to expect in using CSS when recoding common layouts in CSS is a struggle for even CSS experts? I am forced to conclude that it is folly trying to adhere to any kind of CSS standards with any kind of rigor until CSS itself becomes more mature.

Now this is where I get flamed. I'm sorry, but I have to call it like I see it.

The problem is browsers, not CSS

[goldspider]

I'm reading that book too, but I have a different take on why it took three CSS "experts" to re-code that page.

It's not CSS' fault; it's the noncompliant browsers. Zeldman's book is basically about using CSS to build a standards-compliant web site that renders properly on a variety of non-compliant browsers.

Given the differing level of support among the browsers out there, it's no wonder that one has to jump through some hoops to get a consistent display.

quirksmode

[eelcoh]

Has anyone mentioned http://www.quirksmode.org/?

Re:-moz-stylings

[arkanes]

These are the mozilla-specific names for features that are in CSS 3. The dash prefix, by the way, is the correct and standards-compliant way to create extensions.

I believe that -moz-border-radius is already mapped to it's CSS3 name, but if not they will be as CSS3 support is implemented.