learning css more and more professionally

Question

I develop websites since last two years now and I have hard time learning CSS (just spend a whole day creating a login box like twitter...). And sooner or later I fall back to table layout, and get things done (for almost everything I dig deep in to other's source code and Google like hell... but I wish I know how to do it the way I normally figure out my programming problem instead of Google all day...).

And even after sometime if I achieve goal to create a perfect layout, and go back to IE for testing, everything is messed up.

I am the only guy developing it, so normally 70% of my time spend on design and 30% on programming.

I think I need to learn something more so that I spend less time adjusting my layouts and more time program it.

How you all programmer+designer work? And, how to master CSS?

Answer 1

How you all programmer+designer work?

When working with CSS, I find it is best to design and build the site first for a standards compliant browser (My preference is FireFox). Then, when you have it looking right in that, check it for Internet Explorer and other browsers.

For a design of any complexity, unfortunately, there will be time spent with multiple browsers open fixing a rule until it is consistant.

And, how to master CSS?

There are several improtant things to wrap your head around that will make your CSS life easier: The first I would learn is the Box model. That's the official W3C article on the subject, which is quite long, so I'll include an image below as well, which simplifies it a bit:

It's important to note that browsers calculate this differently.

Once you know what is causing things to size themselves, layouts should be easier to achieve in the same style as tables.

The second that helped me wrap my head around what was going on was specificity This article helped me a lot with working this out. The essential summary is that each type of selector (element, class, id) has a weight attributed to it and if an element has a css value with a higher weight, then it will nt be overwritten.

#id 0,1,0,0

.class 0,0,1,0

p 0,0,0,1

1,0,0,0

So, it doesn't matter what your css files say, an inline style gets priority. Example:

a {color: red;}                                               (0,0,0,1)
.class1 a {color: blue;}         Overwrites red               (0,0,1,1) 
#id1 a {color: green;}           Overwrites blue              (0,1,0,1) 
#id1 .class1 a {color: yellow;}  Overwrites green             (0,1,1,1) 
#id2 a {color: red;}             Overwrites green, NOT yellow (0,1,0,1) 
#id1 #id2 a {color: black;}      Overwrites yellow and red    (0,2,0,1) 

I'd still read the article. Twice.

The third thing to learn is how to support previous browsers (like IE6) and the bugs with which they will plague you. I am a fan of this site: http://www.positioniseverything.net/ They cover, with clarity and solutions, a great many of the browser bugs you will encounter when implementing cross-browser support with CSS.

Some of the bugs you will likely encounter with IE6 are:

• The 3px float bug.
• The double margin bug.
• The peekaboo bug.

Answer 2

I've been doing web work for 12+ years. I lived through table layouts, frames, DHTML, XHTML, CSS, Ajax, ... I remember the first time I saw CSS, I thought "WTH is this mess? I'll never need this." A year later I found myself learning it, and indeed you can do some really powerful things with it. But to learn in and learn it well, it will take time and dedication.

A few hints, use a CSS reset like Eric Meyer's. http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/. That will neutralize a lot of browser-specific formatting so you're starting off with a clean slate but not as much overhead as other resets.

Make sure you have a well formed HTML/XHTML document, with the desired DOCTYPE at the top. Different browsers will render pages differently according to different DOCTYPEs.

CSS is also a different way of thinking. Whereas before you maybe had a graphic positioned in this block, suddenly you're thinking in terms of layers and backgrounds. Maybe the graphic isn't in a block at all but has padding and a background image itself. It takes time to see things differently.

And finally, I'll admit after all these years I'll still revert to tables to layout most of my forms. CSS is great, but it's not the holy grail. Be practical. You might want to watch the first portion of http://developer.yahoo.com/yui/theater/video.php?v=crockonjs-4 where Crockford outlines a bit of history for these web standards such as HTML and CSS and what he sees with issues with them.