Lately I've been doing presentations on CSS to colleagues. CSS is continuously evolving, especially with CSS3, but this was a crash-course that only covers the very basics of CSS with some exercises in between, and the whole thing had to fit half a day. The audience was made of people that have been working with CSS for years now, some of them on a daily basis. Making real web sites. With a lot of style! Why would a course of CSS be useful for people that have been using it so much? Why did almost every attendee give positive feedback on the session?

The simple answer is because you can use something for quite some time without really knowing what you're doing. And why didn't they learn the basics in the first place? Because the way CSS is thaught on the internet is fundamentally broken.

CSS Learning with Online Content

I've never read a book on CSS, nor attended to a workshop or course or whatnot. All I've learned about it was by searching and researching within what's available in the internet. So all the information contained in the presentation was actually available in the internet.

CSS information in the internet can mostly be put into one of three categories:

• organized reference material: W3C Standards, Mozilla's MDN documentation, Microsoft's MSDN, ...
• tutorials of all kinds and sizes
• experiments and hacks where people explain tricky techniques to achieve a specific result or where people compare the behaviors browsers have with the behaviors the standards say they should have

And these categories are accessed by different kinds of audiences

• organized reference material is used mostly by very experienced users that take time and dedication to thoroughly read such documentation
• tutorials are used by everyone else to get starterd and learn everything afterwards... at least until they become very experienced users
• experiments and hacks are used by the experienced users as sources of learning and inspiration or by the rest of the users as source material for a trial-and-error approach to solving a specific problem they're experiencing at a particular time

With so much content available for different audiences, it would be natural to expect that learning CSS was an easy task. The reason why this isn't true is because there's virtually no content dedicated to how to solve the problem you need solving. This may seem like a ridiculous idea because there's no way the authors will guess exactly what you need, but it's not that stupid either because there are quite a few problems generic enough for almost everyone to struggle with them, that could have a little lighter answering.

Everyone ends up needing to layout things on a page, which means how to place and position things on a page. But if you look for positioining you end up finding static, absolute, relative and fixed, coordinate systems, and nothing of relevant for what you're trying to accomplish. Could you have guessed that floats were the right section to look for? And even if you could, how would you then make sense of all the information? Would you, just by reading MDN page on floats be ready to abuse this property and start splitting your layout into multiple columns within a centered page?

So what happens to everyone when they attempt at making their header-columns-footer layout? They resort to Google or to tables. If they get into Google, then they'll reach the clever hacks of people who've been fighting with the column problem for years, walking paths of such difficulty that upon reaching the solution they've even called it the Holy Grail. By then it is already too late: even it they're lucky enough to find a well written articule (such as A List Apart's), chances are they're already too tired to understand it and just want to copy paste the code. If it works, then the learned lesson will be that CSS is a kind of a dark magic which can be tamed by copying and pasting random code from the internet.

Keeping the Ultimate Goals in mind

People don't usually wake up thinking hey, today I really feel like learning a lot more about floats! They have other things in their mind and that's what we should aim for when doing presentations or writing content on the web, be it for CSS or for anything else. People want to solve some problem they have on the back of their heads. You don't want to know how the chemicals mix themselves to produce the flavor. You just want to have that cake.

As with everything in life, keeping the ultimate goal in mind will help you getting into what really matters. That's why the approach followed to create our little CSS presentation was:

• Here's this oversimplified version of things and that's how we want you to see the world from now on (setting a common ground for concepts, terminology, ...)
• There's this thing you want to achieve (the goal, real world problem, that could be as generic as layout things in a webpage or as specific as make those round corners work in IE)
  • These are the tools you have to do it
  • These are the problems we know you'll hit when using this approach
  • This is how to overcome those problems
• And now that you know how to do it by hand, here's some info on advanced techniques that could help you accelerate that process

At the end of each topic, people would relate with the goal and with the pains, and so they'd all be very happy to know about the tools and the techniques that could make their life a lot easier. They didn't learn what's the normal flow or the box formatting context, but they did learn how to solve their biggest problems and how CSS wasn't all that magic. Perhaps if we had more time we could, only after, explain all those technical details which combined make up the magic.

To be fair, our task was eased by the fact that we knew a lot about our audience. We knew what they'd been struggling with, what they felt that they lacked. We knew what their problems were, and what goals did they have in mind. But again, I'm pretty sure that laying out things on a page is a goal generic enough for everyone starting to learn CSS to be interested in that problem, so there's no excuse for lack of better learning content on the internet.

New Hopes

Better and better content on web technologies is appearing every day on the internet. Initiatives into improving that content and the discoverability of good content have been sprouting all around. I'm expecting that content quality on all HTML, CSS and JavaScript will still mature a lot making it a lot easier to learn these technologies.

CSS3 has some features that may help tackle some of the problems that where extremely difficult to solve with the primitives CSS2.1 offered, and that ended up being the root cause of why solving layouts with CSS wasn't an easy job. For example, if the CSS Grid Layout module matures enough to become the standard of making layouts in HTML, then learning the floating quirks could be left as an exercise to support the legacy browsers of the future.

EDIT (2012-07-28): I've stumbled upon some very good classes on CSS in Google Code University's course HTML, CSS, and Javascript from the Ground Up which despite still not following a problem-solution methodology, is probably the best introductory material to this subject I've seen online so far.