I have been sitting here for a while trying to think of the best way to go about this specific article. The reasoning being that I want to get it out of the way as fast as possible, but I also think there are some very important bugs that every developer runs into. Because I cannot go over these basics in detail, to save time and headaches I decided to make a list of all of great tutorials to solve some of the major pitfalls in CSS so hopefully this helps. If you want more information on a specific topic please feel free to ask.
This video has a lot of conceptual information about how CSS should be structured. It might fly over your head but I would watch it as there could be something beneficial to you.
As I have mentioned before, browsers render websites completely differently when no CSS is applied. An <h1> in Chrome may be a couple pixels larger than an <h1> in Firefox. They might even be a completely different font. To solve this problem, the CSS reset was invented. This is a file just like any other CSS file but its purpose is to override those defaults that the browser sets up. This provides a clean slate to work off of when creating a website from scratch. There are multiple different versions of CSS resets and I encourage you to not only use them but to edit them when a certain element doesn’t act how you personally feel it should. A great website was set up to host the most popular resets available, and you can find that website at http://www.cssreset.com/.
Table Layouts – You’re Doing it Wrong
If you run into a website that teaches you how to design a site using primarially the <table> element, stop reading it right away. For more information about why <table> layouts are bad, read this.
Fluid vs Static vs Elastic Templates
There are three different types of layouts you can create with CSS – here is an overview of each of them.
Block Vs. Inline-Block
It is very important to know the distinction between these terms, see this website for more details.
100% Height Bug
Height is a very crappy system in CSS, especially when trying to get something to stretch from the top to the bottom of a page. For 100% height issues, check out this tutorial.
There are multiple ways of centering elements and it all relies on the context of that element, to see what I mean check out this website.
Don’t reinvent the wheel – If you are looking for a way to do something specific through CSS see if there is a code snippet out there. A snippet is simply a block of code someone else designed that you copy and paste into your document to solve a problem. See this website for a list of snippets for various basic languages.