Would anyone say it is a good idea to sit and try to understand websites CSS to learn things or would you say just stick with the WW3 guides or something?
IMO, the only way you can become "great" is knowing exactly how anything on any website is done. It's a combination of both reading the *W3* CSS Specs and knowing what each property and corresponding values does, testing what works in X browser and Y browser, and how everything on any website is done with CSS.
Soulscratch is right. That is the best way, but unfortunately it takes time (as does everything else in life). Fortunately, there are some wonderful (and unfortunately, garbage) books and tutorial sites available that can speed up the process. But at the end of the day, the only way you will learn is by doing - because your brain needs to take the information, process it, and then retain it for re-use later on.
Agreed. A good way to develop and keep up ones skills is to actually look at problems other people are having, and seeing if you can fix them. A lot of times people come up with layouts or designs you'd never think up or try, and attempting to find your own way of doing it is great practice. There is a short list though of 'questions' I always ask myself when coding a page, that you may find of use. Do I need this tag? You see this one all the time people using tags for no reason. <div id="header"><strong><font color="red">Title</font></strong></div> BAD CODE - what's so bad about it? It's a header, use a HEADER tag. You have a perfectly good ID there, so apply your styling there... and frankly if you are using a header tag, you could just style all header tags the same way - or if you have four of them in a row, assign a class to the parent container and apply them that way... as such: <h2>Title</h2> Might be all you need. You see this with tables ALL the time - if you only have one TD, if it's only one column or if you aren't positioning dynamic height content vertically, you shouldn't even be THINKING about using a table... That does NOT mean never use tables for layout - if it's quick, and things like faux columns just aren't going to cut it, or you need to do full clears in your columns without worries of it screwing up the layout... more power to you. Do I need this class? This is just as bad. <ul> <li class="mylink">Link #1</li> <li class="mylink">Link #2</li> <li class="mylink">Link #3</li> </ul> /FAIL/ even harder. There is NO need to EVER assign classes that way... <ul class="mylink_list"> <li>Link #1</li> <li>Link #2</li> <li>Link #3</li> </ul> is MUCH simpler. Instead of ".mylink" in your css, just use ".mylink_list li" Does this need to be a separate file? The more files you serve to the user - CSS, Javascript, Images - the more 'handshakes' that must be done with the server. If your page is 50 files, that can easily reach more than twenty seconds loadtime for the average BROADBAND user - not from the speed of transfer, but the ping time required for the three handshakes per file. Image combining techniques are among the quickest and simplest way of image reduction. Have a look at: http://battletech.hopto.org/html_tutorials/fourcorners/template.html That's a fully dynamic width and height, even the header area is dynamic for wordwrap... and it only uses two images to accomplish that, where most people would use 8 images. Too often you'll see sites Does my directory tree even make sense? People love to separate stuff into directories, but too often they'll use absolute links with the full URL to their content, or relative links 'up tree' to parent folders - Everything should (IMHO) be put 'down tree' as children from the file calling it. Usually, I'll do root - HTML/CSS root/images - page specific images root/theme_images - images used to create the 'theme' root/scripts - javascript root/downloads - downloads etc, etc. That way in my html if I'm calling a page specific image it's just "images/test.png" and not "../../images/mypage/test.png" or "http://go.to.hell.com/images/test.png" - makes the testing page completely portable and moving between hosting locations a snap - and is just easier to maintain. Am I overthinking the solution? This one is hard to guage, but quite often with the things people will tell you - "Only use %/EM", "Never use tables for layout", etc, etc... you'll often end up jumping through endless hoops and wasting time on minor little layout elements when you KNOW the real answer. NEVER sacrifice your time on the altar of extremism. Things like the above two examples DO bring a lot of good ideas with them, but they should be treated as EXTRA tools and used when/where appropriate - not as a cure all at the expense of time tested techniques and common sense.
Problem with that is my brain is kinda hard-wired to CTRL SHIFT F and firebug is a bit laggy and still buggish (if think if you click on an element and f12 outta firebug it'll screw things up and you'll need to refresh).
Or the Opera Developer Tools. http://dev.opera.com/articles/view/opera-developer-tools/ I'm partial to the DOM snapshot just because it takes other people's crap coding habits and turns it into something legible.