How can I learn CSS easily?

Question

I am using the Django framework and am pretty comfortable with the backend logic using Python, but what's bothering me is the front-end bit where I have to work with CSS. How can I learn easily the workings of CSS or is there a tool I can use to create the front-end interfaces for Django easily?

Answer 1

One word. It will change your life: FIREBUG.

As a UI developer, I learned much of what I know through trial and error. While there are probably 10 ways to do any single UI-related task, there are better (and more efficient) ways than others. Check out A List Apart. Probably my favorite UI/CSS blog.

Also, in order to learn the intricacies of how browsers render HTML, ALWAYS check your designs in as many browsers as possible. Avoid using browser hacks. You really don't have to use them; if something is wrong in a browser, then you should rethink the way you've put things together. At any point in time, I have Firefox 3, IE6, IE7, and Safari/win open on my PC, checking all my work.

Another great way to learn is challenging yourself: find some free designs somewhere and try to mock them up using table-less layouts. Get familiar with the concepts of floating and margins. Just remember to always use a doctype!

Answer 2

There are some fine online tutorials, either at sitepoint or at w3 schools.

Answer 3

CSS by itself is fairly easy to understand and other answers have pointed to a lot of good CSS resources. The real challenge is learning all the quirks and bugs in each browser and this takes a lot of time.

You should definitely take the time to learn how CSS works, but as a newbie if you want to get started now, without worrying about many issues, I would recommend using one of the so-called CSS frameworks.

Here are some of the better known:

• Yahoo! UI Library: Base CSS
• Bluetrip
• Blueprint
• Emastic
• YAML (not to be confused with the data markup language)
• 960 Grid System

I've successfully used Blueprint and Emastic templates with Django.

The Yahoo! YUI grid has an extra advantage of there being a Django app designed specifically for using YUI grid with Django called django-yui-layout-templates

If you start with one of these frameworks you can build websites now and then gradually develop your own CSS over time as you learn the quirks.