A CSS Sprite is a single image with all of your web sites images combined into a single image. If you have image A and image B you combined them to make image C, and define the HTML tag size to be the size of the original image (image A or B) and the define the background-position attribute according to the location within image C.
The Advantages of doing this give image roll over effect a quicker transition because the Hover image is already loaded into the browser it only needs to be shifted in background-position. It also speeds up your websites load time by having less fetches with each image transfer.
Best practice with combining images is to only combine the necessary images together. There is no reason to combine all of the sites images together when this will increase the web-pages size and load time.
I like to use the CSS Sprite Generator at website-performance all you have to do is zip up all of your images files you would like to combine and then upload it to the site. There are a few options you can choose from for your output image like transparency and image spacing requirements. The the Sprite Generator will provide you with a Image you can download and all required CSS (image size and location within sprite) to position the images correctly within your site.