CSS Sprites

Hey everyone, first of all, my website is: https://www.rishi-kumar.com

It has around 25 HTML requests per load (without Super-Cache), and about 22 of them are for images called for by the style.css. I’ve created a sprite with all the images and the website I used (https://spritegen.website-performance.org) also gave me some “rules.” I’m not very familiar with CSS, so I was wondering if someone could aid me in making the proper substitutions.

For example, here’s a clip of some of my current style.css calling images:

#searchform #s{
	background: #ffffff url(images/form-field-bg.gif) no-repeat ;
	height: 17px;
	width: 148px;
	margin: 6px 5px 0px 10px;
	padding: 3px 7px 2px 5px;
	color: #999999;
	border: none;
}
#searchform #searchsubmit {
	background: url(images/search-btn.png) no-repeat left top;
	height: 24px;
	width: 24px;
	border: none;
	text-indent: -999%;
	line-height: 1px;
	margin-top: 6px;
}

After generating my sprite using the aforementioned website, I received a list of “rules.” Among these were the following, which I think match up with the two CSS terms from earlier:

.form-field-bg { background-position: -2348px -1364px; }
.search-btn { background-position: 0 -1166px; }

Also, the website told me not to forget to add a background rule reference to the sprite image like this:

#container li {
   background: url(csg-4878343169917.png) no-repeat top left;
}

All is where do I insert the reference to the sprite image… and how do I tell my style.css to use the parts of the sprite image rather than calling the images individually? Thank you!