CSS Guides for improving skills

Hi for the last month I have started to learn CSS.Fist thing I did is read everything i could find on www.w3school.com , after that I started reading CSS Mastery 2nd edition.I have build a couple of my own websites with succes but I'm still not happy with what I know , I even practiced with the new CSS3 elements.

I've seen alot of cool stuff build using css especialy on http://www.cssplay.co.uk/ but the o开发者_StackOverflow社区nly problem is the source code is not displayed and I don't know how the bloody things are.A good example is this:

http://www.cssplay.co.uk/menu/tilt.html

And these is only one of the things that I've seen on this website and would like o learn how to build them.

So anyone know any other similar sites that ofer a good explanation on the more advanced stuff about css(not beginer stuff like building some drop down menus , rollover or hover efects )?Any advice is much apreciated thank you!

As already mentioned, tools like Firebug/Chrome Inspector are definite must haves.

I gained the most experience from real world problems with various different browsers. You make a site, it doesn't look so good in a particular browser. So you search on the internet. Find a solution and memorize it. I think that CSS in itself is a fairly simple tool, I class 'advanced' CSS as mastering the various techniques required to make sites work cross browser and in browsers like IE6/IE7+.

Also, Never give up with CSS, if you find a problem try and find an answer. Most of the time, there will be a simple solution.

In general, make sure your CSS is as simple as can be. I generally find that most complicated CSS can be replaced with relatively simple code, and find people get carried away and forget simple techniques to achieve similar solutions. One such problem, would be putting a button on the right hand side of a div, like below:

 -----------------------------------------------
                                    |  Button  |
 -----------------------------------------------

You may see that some people will float the button right, adding more complexity than necessary. What ever happened to text-align:right? :-)

Finally, make sure you find a couple of blogs you like, for example http://csstricks.com and read them, taking note of new techniques. Try and master a '2 column layout', understand the difference between block/inline-block/inline, margin collapsing, tables, html forms, IE6/7 hasLayout, the list goes on. Most of which you will cover if you try and make a website template from scratch. Maybe start with an existing site and see if you can achieve the same layout.

I'm not sure with CSS how to learn it's pitfalls without encountering them mistakenly.

It looks like the stylesheet for the maze is located at: http://www.cssplay.co.uk/menu/candr/tilt.css. You can use that against the source code to figure it out.

One of my favorite is A List Apart. Great articles, not only about CSS like I linked, but about web design and more.

Also HTML Dog has some nice CSS entries.

Then, you can find great CSS resources on the w3 site.