Honing CSS skills

[webdesignm]

I think I have got to a point with Css where I can build anything I or someone else have designed, my codes validates and also work in older versions of IE.

However, I can't help thinking that I'm still not there yet because my codes doesn't look the same as my web designer collegues. Their codes have a lot of '!important' and '-moz' and they use z-index and mainly position elements. I've never used !important and -moz and z-index in my codes (never had to) and I tend to float most things which they've already told me I shouldn't do.

The books I've read haven't taught me the above. Should I be coding like how they are? I would like to get really advanced at CSS.

So what advanced books out there should I be looking at reading? I'd like something quite new that also has a small snippet of Css3 but I want the focus to be Css2.1.

This book looks like it's inline with what I'm looking for Smashing CSS: Professional Techniques for Modern Layout - Eric Meyers

Anyone read it? Can anyone recommend anything else?

P.s - I have read CSS Mastery - I'd like something even more advanced.

[Wickham]

Answered in the other forum where you posted.

!important is often used because the coder has so many css files and so many styles that he's got a bit lost and can't remember whether he's styled something before, so he uses !important to give it precedence. Lazy.

-moz and -o and -webkit and -khtml are used as prefixes for new CSS3 styles in conjunction with HTML5 and are temporary because CSS3 and HTML5 is still technically not finally released, so these prefixes will eventually be redundant. Styles with these, like


#box-shadow { width: 300px; height: 50px; -moz-box-shadow: 7px 7px 5px #888888 ; -webkit-box-shadow: 7px 7px 5px #888888; -khtml-box-shadow: 7px 7px 5px #888888; box-shadow: 7px 7px 5px #888888; background: #ddd; border: none; }

should always be followed by the basic style box-shadow: 7px 7px 5px #888888; for the future when all browsers should operate the CSS3 without needing a prefix and for those browsers which are properly up to date. At the moment some browsers need the prefix but some, like IE6,7 and 8, are still not processing the CSS3 styles.

Books are usually out of date, especially now that HTML5 and CSS3 are upon us. Use discussion forums. Even online tutorials may be out of date. Look for a revision date.

Floats are valid and useful.

z-index can be useful, you usually need to use it in conjunction with position: relative or position: absolute to make it work.