Hello, i am still newbie on html and css, so maybe this is an stupid question, but i will try anyway

My big probleem is understanding the difference between 'class' and 'id' and when to use it? I've read a lot of tutorials about it, but i still can't understand! i notice that you only can use the same 'ID' one time and 'class' more times, but my question is can i only use one time my 'ID' at the same element or the for whole document?

I made one website with only "classes", is this bad?

For example, I have divided my website into different sections:
this is my exemple for services!

HTML Code:
<section class="green">
   <div class="grid960">
      <div class="services">    <!--I think this needs to be "ID" or not!-->
         <div class="col White">
            <a href="/services.html"><img alt="service 1" height="110" src=
            "../images/ico.png" width="110"></a>

            <h3 class="red">Service 1</h3>

            <p class="lightgray"> <p class="lightgray">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in quam urna. Duis malesuada malesuada ultricies. 
            Praesent sollicitudin purus sed mi pellentesque vehicula. 
                       </p><a class="btn btn-rounded Red" href="#">read more</a></p><a class="btn btn-rounded Red" href=
            "#">read more</a>
         </div>

         <div class="col item2 White">
            <a href="/services.html"><img alt="service 1" height="110" src=
            "../images/ico2.png" width="110"></a>

            <h3 class="red">service 2</h3>

            <p class="lightgray"> <p class="lightgray">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in quam urna. Duis malesuada malesuada ultricies. 
            Praesent sollicitudin purus sed mi pellentesque vehicula. 
                       </p><a class="btn btn-rounded Red" href="#">read more</a></p><a class="btn btn-rounded Red" href=
            "#">read more</a>
         </div>

         <div class="col item2 White">
            <a href="/services.html"><img alt="service 1" height="110" src=
            "../images/ico3.png" width="110"></a>

            <h3 class="red">service 3</h3>

            <p class="lightgray"> <p class="lightgray">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in quam urna. Duis malesuada malesuada ultricies. 
            Praesent sollicitudin purus sed mi pellentesque vehicula. 
                       </p><a class="btn btn-rounded Red" href="#">read more</a></p><a class="btn btn-rounded Red" href=
            "#">read more</a>
         </div>
      </div>
   </div>
</section>

<section class="blue">
   <div class="grid960">
             <!--This is an new section-->
    </div>
</section>
Where should i put my ID's ?

Thanks in advance