How can i learn CSS easily?

Question

Am using django framework, am pretty comfortable with the backend logic using python, but whats 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

My only tip is hacking great sites. If you like the design, hack it. Using firebug is a great step ahead, since it gives you the computed CSS.

But, really really learning CSS is never that easy. Sorry to tell.

Answer 2

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

Answer 3

I've learned a lot about CSS by going to CSS Zen Garden. Inspiration and learning resources in one place.

Answer 4

The 'Edit Css' function in the Web Developer toolbar for firefox allows you to edit a file's css and view the result in real time. Makes experimenting a lot quicker and easier.
When you've created a great stylesheet, have a look at it in ie, weep, and start learning how to do cross browser css. A good place to start is quirksmode

Answer 5

• First, the spec
• Play around (use Firebug)
• Snoop around for IE workarounds, and misc tricks.
• If you want something in print, I really liked Dan Cederholm's Web Standards Solution, even though I hate most technical books
• Practice! Practice! Practice!

Answer 6

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 7

I have to agree that it's a lot of trial and error. There are sometimes many ways to achieve what you need to...some more "proper" than others. CSS Zen Garden was one of the first sites I discovered that really helped things click in my own head. View the design, view the source, view the design, etc...

A couple of books I appreciate having around are Dan Cederholm's Bullet Proof Web Design and

Andy Budd's CSS Mastery

Both give solid ways of accomplishing some common techniques and issues you'll run into with css-based designs.

Answer 8

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.

Answer 9

The best book I've read about CSS and HTML is Zeldman's Designing with Web Standards

Zeldman covers the historical aspects of HTML and CSS along with converting a table-based website to semantic CSS. He also covers web standards, graceful degradation and browser quirks. It's often considered the 'bible' of modern web development.

After that I'd recommend Dan Cederholm's books Web Standards Solutions and Bulletproof Web Design

Answer 10

I have the book "CSS in easy steps" by Mike McGrath. It has a lot of pictures to visually explain what is going on. It's very handy for getting a strong understanding of CSS. After you learn the basics, it is helpful to talk with people or read examples online. I find myself going to #css on IRC (Freenode) for help. They are very helpful there.

Answer 11

I second (third?) the advice to use firebug. It will preserve your sanity.

A fine book I've read on CSS design is Wyke-Smith's Stylin' with CSS. Not the best title, perhaps, but the content and presentation are excellent. I keep my copy handy whenever I have to delve into style sheets.

Answer 12

If you're developing on a Mac CSSEdit will save you tons of time.

Answer 13

There are more suggestions for learning CSS in this question.

Answer 14

CSS isn’t really that easy — it kind of stands on its own in terms of its concepts.

If you’re delving into it deeply, CSS: The Definitive Guide is well worth it.