styling my link pages

[i can spell html5!]

sorry to have to ask such a noob question but here goes. my pages has the all the folders (7 deadly sins, you play too loose!, not understanding starting hands etc.) I'm going to need but I'm not sure how to reference them in css. each page will of course have slightly different styles going on and I'm not sure how to reference them in css. heres the code(s)

 <div class="vbar">
         <div class="vbartitle">In The Beginning</div>
     <ul>
      <li><a href="7.html"> The 7 Deadly Sins</a></li>
   <li><a href="loose.html"> You Play Too Loose!</a></li>
   <li><a href="hands.html"> (Not Understanding) Starting Hands</a></li>
   <li><a href="oop.html"> Playing Out Of Posistion</a></li>
   <li><a href="sel.html"> Be More Selective </a></li>
   <li><a href="co.html"> Commitment</a></li>
   <li><a href="take.html"> Take Advantage</a></li>
   <li><a href="tilt.html"> Stop Tilting!</a></li>
   
   </ul>
</div>

 

 

and the css

 .vbar{
 position:absolute;
 left: 434px;
    top: 87px;
   width: 200px;
 border:1px solid #999;
 margin:100px 0px 10px 12px;
 text-align: center;
 }

 
  .vbartitle{
  background-color:  #ADD8E6;
  padding: 12px;
 text-align: center;
 font-weight:bold;
 
 }
 
 
  .vbar ul {
    list-style:none;
  padding: 0px;
  margin: 0px; 
 }
 
.vbar ul li {
    list-style:none;
  padding: 0px;
  margin: 0px; 
 }
 
 .vbar ul  li a{
   display:block;
  padding: 10px;
    color:#000;
 text-decoration:none; 
 border-bottom:1 px solid #f1f1f1;
 
 }
 
  .vbar ul  li a:hover{
  color: white;
  background-color:         #0000FF;
 border-bottom:1px dashed #000;
 
 }