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

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 [alistapart.com]...

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!

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

How great CSS is

[ChrisF79]

I'm not the best one to comment on this by any means, but when I saw in the summary the part about "how great CSS is," I really do have to agree. I threw together a site just as a way to help some of my students back when I was teaching and really didn't know anything about creating a website. I hacked together a site with tables for layout and some very limited PHP and enjoyed doing it. From there, I went to a site that showed a table layout and the exact page done in CSS and used that as a starting point to learn CSS. I have to say, I was impressed with how much easier it was to use and modify later. Like I said, I'm still a horrible web designer by all accounts, but I can attest to how much easier it is for a person new to the concepts to use CSS instead of tables.

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.

Java Swing or AWT to HTML and CSS

[syousef]

Here's a shameless plug for you. Here's my code for converting Java Swing or AWT to HTML and CSS. It's primitive, but it may be useful to someone. It should be easy to modify this to convert any running Swing/AWT application from Java to HTML/CSS. Oh and of course its GPL.

http://www.progsoc.uts.edu.au/~sammy/javaGUIConver ter.html [uts.edu.au]

Trying to understand CSS...

[islandrain]

Ironically, I am taking the week to sit down and really figure out CSS because I'm sick of seeing the term everywhere and having ZERO clue of how to use it effectively. Let me get this straight to begin with - I'm a designer, not a web expert. I use *gasp* Dreamweaver, although I know HTML just fine. It's a visual thing and I work better seeing the flow of the graphics, etc. directly on the page. So my biggest beef is wanting to design non-framed pages where menu links will change without having to manually change them in each page. I want you CSS people to respond to this: Tell me three reasons why CSS is the way to go (cleaner codes isn't a good reason for me, either).

Re:CSS tables

[zkn]

And divs are ment to mark divisions, not be a universal styling element.
The point of CSS is to seperate the design from the underlying HTML, not just replace tables with a mess of nested divs.
Divs are ofcause usefull to seperate different parts of the site like menues and content, but to many use several nested divs to make borders, backgrounds and position elements "just right" ending up with code like this for menues:

<div>
<div><a /><div>
<div><a /><div>
<div><a /><div>
</div>

So instead of using CSS to improve the HTML, they use it to fuck it even more up. Now having effectively removed even the slightly understandeble table layout, and replaced it with HTML that only looks right when you have the magic Stylesheet that it was designed for.

Now that CSS has caught on, people need to push semantic HTML using divs for everything just isn't right.

One more

[amrittuladhar]

One more, a good resource not only for CSS but many different web technologies, mostly for beginners:

W3 schools [w3schools.com] (Warning: Has a popup, but it's worth it)

Re:CSS tables

[Darkman, Walkin Dude]

CSS Zen Garden is a wonderful resource and has a lot of pretty pictures in it, but really it is taking two steps back to the start of the web, where every site was a poster with little interaction. All of those fixed layout designs and shiny objects are good to display artistic talent, but try putting dynamic content in there, and you are in for a world of hurt.

Re:The REAL news ...

[schon]

Yeah, too bad it doesn't validate. :o)

Re:Take a step back and re-evaluate CSS

[foniksonik]

Despite the limitations CSS is still the future of the web. It's not about beating table layouts though. It's about programmable attributes in a scalable system.

Think about using XML + XSLT + CSS to generate scalable presentation layers that meet the needs of multiple PLATFORMS using the same business logic and content layers.

Think about Accessibilty and the ability to define stylesheets for web browsers, text readers for the blind, PDF, printed versions, etc. without having to use multiple html layouts.

I find CSS to be quite robust as it is now and couldn't possibly design some of the web sites I've created recently without it. In fact I find myself wishing for a more robust CSS like stylesheet support model in my print programs, ie: InDesign, Illustrator, etc. so that I could transform content designs into multiple print layouts as easily as I do my web sites.

Sorry I couldn't flame you more but I felt it was more important to point out the positive side of CSS than tell you how ignorant you may or may not be on the subject.

Re:No CSS on that site.

[arkanes]

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.

There is no way in CSS to say something like "size this element relative to the size of that other element" without a parent-child relationship between them. That's the biggest flaw in CSS and it's supposed "semantic markup", because the parent-child stuff is determined by your *content*, the markup, and not just by the CSS.

Your point about the difficulty of moving stuff around in tables is well taken, but on the other hand compare the difficulty of moving from a 3-column fixed format to a 2-column flowed one in CSS vs tables - the hacks to do that kind of flowed layout (at least cross-browser) will require a total reworking of the CSS, as well as content changes. The table version requires changing a couple tag attributes and some reformatting. And even with the huge amount of CSS hackery required to get a basic "newspaper" style column layout (and it takes a very detailed knowledge of CSS to implement this, although [of course] most people will simply lift it from elsewhere), it *still* doesn't demonstrate the same, intuitive behavior that table rendering does when you size it very small or very large. To the best of my knowledge, you cannot make a column based layout in CSS without defining explicit widths at some point without relying on the table-layout attributes, which are not widely implemented.

And it still grates on my nerves how people will proudly display their hacks with comments and exploiting bugs in parsers and 100s of lines of CSS to create "cross browser" CSS, while at the same time decrying table based markup as "hackish". Here's a hint - your bug reliant stylesheets are actually an *obstacle* to the implementation of proper CSS support in IE.

Re:No CSS on that site.

[arkanes]

Yes, there is. You can do it with CSS tables. Internet Explorer doesn't understand them, but we're talking about the capabilities of CSS, not the capabilities of Internet Explorer, right?

Maybe you are. I'm talking about not only the CSS standard, but also the usefullness of CSS layout vs. tables in the real world, where implementations matter. Talking about what CSS3 could do if there was 100% browser support might be interesting over a beer, but it's not very usefull when it actually comes to developing web pages. In any case, there's very few instances where a parent-child relationship isn't available to be used in this way. That's just the nature of web pages - things that are visually related tend to be structurally related too.

Thats why there's no need for lots of semantically meaningless divs and spans in CSS markup, right? So if I go to a CSS advocacy site I shouldn't see any of those, or any suggestions to use those to implement the layouts I want? The direct parent-child relationships needed to "hook" in your CSS are fairly rare. Thats why you end up creating them, either with div/span (meaningless markup, existing for no other reason than to manage layout and in my personal view, a bigger sin than using tables), or by going with tables and dispensing with the notion of semantic markup alltogether.

Re:No CSS on that site.

[iBod]

Well said!

I have yet to see any browser grossly mangle a table layout in they way the commonly do with CSS floats and DIVs.

A question for those who endlessly bang on about 'semantic markup' would be "what semantic value do DIVs and SPANs add"?

Tables do at least have some semantic value when used for actual tabular data - DIVs and SPANs have none at all - they only serve as containers to which styles are applied.

If you want your markup to be purely semantic, it should have no presentational aspect at all (no DIVs, no SPANs).

As you say, the logical conclusion would be to use XML and XSLT. The trouble is, it's not always a practical or desirable solution.

Re:Don't sweat it

[Bogtha]

1. For some layouts, CSS just can't cut it the same way that tables can. Not all layouts, just some layouts.

Maybe I'm just an unusual exception, but it's been years since I've resorted to table layouts. Netscape 4 was the last reason to hang onto them as far as I'm concerned. Maybe it's different if you are making "arty" websites, but for websites that just want to present information in an attractive way (i.e. every website I can think of outside of graphic design), I really don't see any need.

2. CSS syntax, behavior, and debugging are arcane and unintutive.

I agree. But I think exactly the same thing about table layouts. I think the only reason people call them "intuitive" is because they've been doing them for years. I once watched somebody (with a lot of experience) build a website that had tables nested about a dozen deep. I then went in and deleted more than half of them - without adding any CSS or anything - and the layout remained exactly the same. I've seen similar people get completely tied in knots trying to keep track of how deep they are and how many rowspans they need. I've seen bugs relating to table layouts where one half of a submit button was clickable and the other half wasn't. Things like that wouldn't happen if table layouts were intuitive.

3. CSS advocates are often times really snotty, mean, and religious about CSS.

You can say that about any technology really (table layout bigot example [decloak.com]), if you use that as a reason to avoid CSS, then you are just cutting off your nose to spite your face.