title: How do CSS sprites work?
body: <p>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. </p>
  
  <p>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. </p>
  
  <p>I tried doing that, but did not understood what was happening.  Any guidance regarding creating and using CSS sprites would be highly appreciated. </p>
  
  <p><strong>Update:</strong> 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. &ndash;ed.]</p>