How to generate them.
The easiest way is to use SpriteMe generator:
Add it to your browser as a bookmarklet, when you are in the website you want a sprite for click on the bookmark, and click on the “sprite images” button to autogenerate it.
You can also get the CSS for it on the same UI. Easy.
If you have to build it manually, best practices dictate:
1) Construct a matrix, with predefined square sizes of, for example 5×5, 10×10, 16×16, or whatever your images fit.
2) Drop your icons or images in the squares, since all the squares are the same sizes, you don’t have to calculate the CSS, you can just multiply the row and column number, and there your have your CSS setting