How to code sprite images for main navigation for twentyeleven

It was created from an automatic code generator for sprite images that I found online. See below. My question is WHERE to enter this code?

XHTML:

<ul id="navigation">
		<li id="navigation-1"><a href="http://www.rosemaryahern.com" title="Home"><span>Home</span></a>
		<li id="navigation-2"><a href="http://www.rosemaryahern.com/about" title="About"><span>About</span></a>
		<li id="navigation-3"><a href="http://www.rosemaryahern.com/services" title="Services"><span>Services</span></a>
		<li id="navigation-4"><a href="http://www.rosemaryahern.com/testimonials" title="Testimonials"><span>Testimonials</span></a>
		<li id="navigation-5"><a href="http://www.rosemaryahern.com/books-by" title="Books By"><span>Books By</span></a>
		<li id="navigation-6"><a href="http://www.rosemaryahern.com/contact" title="Contact"><span>Contact</span></a>

CSS:
/* HORIZONTAL NAVIGATION BAR
/////////////////////////////////////*/

ul#navigation {
	width:410px;
	list-style:none;
	height:20px
}

ul#navigation li {
	display:inline
}

ul#navigation li a {
	height:20px;
	float:left;
	text-indent:-9999px;
	text-decoration:none
}

ul#navigation  li a span {
	float:left;
	display:block
}

ul#navigation li#navigation-1 a {
	width:65px;
	background:url(Menu_Master-19.jpg) no-repeat 0px 0
}

ul#navigation li#navigation-1 a:active,
ul#navigation li#navigation-1 a:hover {
	background-position:0px -20px
}
ul#navigation li#navigation-1 a.current {
	background-position:0px -40px
}

ul#navigation li#navigation-2 a {
	width:65px;
	background:url(Menu_Master-19.jpg) no-repeat -65px 0
}

ul#navigation li#navigation-2 a:active,
ul#navigation li#navigation-2 a:hover {
	background-position:-65px -20px
}
ul#navigation li#navigation-2 a.current {
	background-position:-65px -40px
}

ul#navigation li#navigation-3 a {
	width:65px;
	background:url(Menu_Master-19.jpg) no-repeat -130px 0
}

ul#navigation li#navigation-3 a:active,
ul#navigation li#navigation-3 a:hover {
	background-position:-130px -20px
}
ul#navigation li#navigation-3 a.current {
	background-position:-130px -40px
}

ul#navigation li#navigation-4 a {
	width:85px;
	background:url(Menu_Master-19.jpg) no-repeat -195px 0
}

ul#navigation li#navigation-4 a:active,
ul#navigation li#navigation-4 a:hover {
	background-position:-195px -20px
}
ul#navigation li#navigation-4 a.current {
	background-position:-195px -40px
}

ul#navigation li#navigation-5 a {
	width:65px;
	background:url(Menu_Master-19.jpg) no-repeat -280px 0
}

ul#navigation li#navigation-5 a:active,
ul#navigation li#navigation-5 a:hover {
	background-position:-280px -20px
}
ul#navigation li#navigation-5 a.current {
	background-position:-280px -40px
}

ul#navigation li#navigation-6 a {
	width:65px;
	background:url(Menu_Master-19.jpg) no-repeat -345px 0
}

ul#navigation li#navigation-6 a:active,
ul#navigation li#navigation-6 a:hover {
	background-position:-345px -20px
}
ul#navigation li#navigation-6 a.current {
	background-position:-345px -40px
}

Another forum user suggested that I use the following format, and still nothing.

#menu-item-246 a {
display:block; height:20px; width:65px; padding:0px; outline:none;
background-image:url('http://www.rosemaryahern.com/wp-content/themes/twentyelevenchild/images/Menu_Master-19.jpg'); background-position:0px 0px;
}
/* Hover */
#access li.menu-item-246.menu-item-object-page:hover > a, #access ul ul:hover > a, #access li.menu-item-246.menu-item-object-page a:focus {
display:block; height:20px; width:65px; padding:0px; outline:none;
background-image:url('http://www.rosemaryahern.com/wp-content/themes/twentyelevenchild/images/Menu_Master-19.jpg'); background-position:0px -20px;
}
/* =Menu - maintain ACTIVE STATE when it is the current page/sub-menu
-------------------- */

#access li.current-menu-item.menu-item-246 > a, #access li.current-menu-ancestor.menu-item-246 > a, #access li.current_page_item.menu-item-246 > a, #access li.current_page_ancestor.menu-item-246 > a
{ background-image:url('http://www.rosemaryahern.com/wp-content/themes/twentyelevenchild/images/Menu_Master-19.jpg'); background-position:0px -40px;
}

Thanks, though must admit that I am completely new to code. I assume you favor the first option (the one from the auto code generator)? I don’t know what “CSS selectors” are.

Can you get me started with one section and I can take it from there?