CSS Image Positioning Social Media icons

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
  
  <div><h1>Using this image and css image positioning will make beautyfull social media buttons</h1>
<h6>I'll be made this following the tutorial <a href="http://robcubbon.com/social-media-buttons-html-css/">here</a>.</h6>
  </div>
  <img src="http://ccom.uprrp.edu/~acm/page1/media/icons/social-media.png"></img>
    <div id="head-soc">
   <h6><a href="http://www.graphicsfuel.com/2012/09/15-free-social-media-icons-psd-png/">Image Source</a></h6>
    <hr>

<div><h3>The result of combining css positioning to each button of the image</h3></div>

<!-- A simple HTML list for each social media icon, each list element has it’s own ID 
(this is for the CSS positioning). -->    
<div id="head-soc">
<ul>
<li id="dig"><a href="">Digg</a></li>
<li id="li"><a href="">LinkedIn</a></li>
<li id="fb"><a href="">Facebook</a></li>
<li id="twit"><a href="">Twitter</a></li>
<li id="drib"><a href="">Dribbble</a></li>
<li id="g"><a href="">Google+</a></li>
<li id="flic"><a href="">Flickr</a></li>
<li id="youtube"><a href="">YouTube</a></li>
<li id="pint"><a href="">Pinterest</a></li>
<li id="tumb"><a href="">Tumblr</a></li>
<li id="share"><a href="">Share</a></li>
<li id="email"><a href="">Email</a></li>
<li id="rss"><a href="">RSS Feed</a> </li>
<li id="skype"><a href="">Skype</a> </li>
<li id="forrst"><a href="">Forrst</a> </li>
</ul>
</div>

  </body>
</html>

// Code goes here

/* Styles go here */
body{
  text-align:center;
  font-weight:bold;
  }
  
#head-soc ul li {list-style :none; padding: 0 0 0 12px; float: left;}
#head-soc ul li a {text-indent: -9999px; font-size: 0; line-height: 0; overflow: hidden ; height: 40px; width: 40px ;border: 0; background: url(http://ccom.uprrp.edu/~acm/page1/media/icons/social-media.png) no-repeat; display: block;}

#head-soc li#dig a {background-position: -560px 0px;}
#head-soc li#dig a:hover {background-position: -560px -40px;}

#head-soc li#li a {background-position: -520px 0px;}
#head-soc li#li a:hover {background-position: -520px -40px;}

#head-soc li#fb a {background-position: -480px 0px;}
#head-soc li#fb a:hover {background-position: -480px -40px;}

#head-soc li#twit a {background-position: -440px 0px;}
#head-soc li#twit a:hover {background-position: -440px -40px;}

#head-soc li#drib a {background-position: -400px 0px;}
#head-soc li#drib a:hover {background-position: -400px -40px;}

#head-soc li#g a {background-position: -360px 0px;}
#head-soc li#g a:hover {background-position: -360px -40px;}

#head-soc li#flic a {background-position: -320px 0px;}
#head-soc li#flic a:hover {background-position: -320px -40px;}

#head-soc li#youtube a {background-position: -280px 0px;}
#head-soc li#youtube a:hover {background-position: -280px -40px;}

#head-soc li#pint a {background-position: -240px 0px;}
#head-soc li#pint a:hover {background-position: -240px -40px;}

#head-soc li#tumb a {background-position: -200px 0px;}
#head-soc li#tumb a:hover {background-position: -200px -40px;}

#head-soc li#share a {background-position: -160px 0px;}
#head-soc li#share a:hover {background-position: -160px -40px;}

#head-soc li#email a {background-position: -120px 0px;}
#head-soc li#email a:hover {background-position: -120px -40px;}

#head-soc li#rss a {background-position: -80px 0px;}
#head-soc li#rss a:hover {background-position: -80px -40px;}

#head-soc li#skype a {background-position: -40px 0px;}
#head-soc li#skype a:hover {background-position: -40px -40px;}

#head-soc li#forrst a {background-position: 0px 0px;}
#head-soc li#forrst a:hover {background-position: 0px -40px;}