I have 3 different images and want to create a sprite using CSS. I understand that will reduce HTTP requests. However, I am totally new to this concept and have no idea as to how to approach this.

What would be best bet for me? Also I have seen there are some CSS sprite generators where you submit a .zip of images and it combines them.

I tried doing that, but did not understood what was happening. Any guidance regarding creating and using CSS sprites would be highly appreciated.

Update: I have gone through the A List Part article but it was not very clear to me. Can someone provide an example of using a CSS sprite? [A short, self-contained example in an answer is preferable for SO than just a link to an example elsewhere. –ed.]