CSS Tips and Tricks

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.

CSS Reset

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.

Centering Elements

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.

Further Reading

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.

Next Lesson – Javascript

Hopefully you guys were fine with me skimming past this stuff – There are a TON of tutorials out there covering it so please make use of them. I promise that when I move to the next lesson with Javascript it will be much more in depth as it is something we will be using for the entirety of the project. I am also considering making some of them video lessons because they may save me time and provide you guys better examples to work with.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s