თანამედროვე საიტების აწყობა ხდება ბლოკების საშუალებით. ბლოკებს აქვს უამრავი თვისება: სიგანე, სიგრძე, ფონის ფერი, ჩარჩო და სხვ; ასევე ურთიერთ განლაგება: დაშორება სხვა ბლოკებიდან, თვითონ ბლოკში შიგთავსის განლაგება და ა.შ. ყველაფერი ამის მიღწევა შეიძლება css სტილების გამოყენებით.
ქვემოთ მოცემულ ბლოკების ნიმუშში დიდი ბლოკია  კლასით class="bloki" და მასში მოთავსებულია პატარა ბლოკი კლასით class="ana". სანამ ამ ბლოკებს რაიმე სტილი არ აქვთ, ვერავითარ ცვლილებას ვერ შევამჩნევთ, მაგრამ როგორც კი სტილებს მივანიჭებთ, დავინახავთ  css-ის მთელ ძალას.
HTML კოდის ფრაგმენტი:

<div class="bloki">
        <p>ეს დიდი ბლოკია</p>
        <div class="ana">
            <p>ეს პატარა ბლოკია</p>
        </div>
    </div>

და CSS სტილი:

.bloki{
  width: 400px;
  height: 400px;
  background-color:#45DB38 ;
}
.ana{
  width: 200px;
  height: 200px;
  background-color:#DB6B49;
}

ეს კი მიღებული შედეგის სურათია:

სტილის მინიჭება ზოგადი ტეგის საშუალებით. მაგ; ყველა h3-ს მინიჭებული აქვს ფონტის ზომა 30 პიქსელი და შერჩეული ფერი. მაგრამ ეს სტილი ჩვენ შეგვიძლია შევცვალოთ რამდენიმე h3-ისთვის კლასის საშუალებით. class="feri" არის კლასი, სადაც შრიფტის სხვა ზომა და ფერია ჩასმული. ყველა იმ h3-ს, რომელსაც  HTML კოდში ჩასმული აქვს შესაბამისი კლასი ექნება მოცემული სტილი. თუ ჩვენ გვინდა ერთი h3-ი გამოირჩეოდეს ყველა დანარჩენისგან განსაკუთრებული სტილით, მაშინ მას გამოვყოფთ იდენტიფიკატორის საშუალებით და ვანიჭებთ განსხვავებულ სტილს. ჩვენ მაგალითში id="button"-ს სრულიად სხვა თვისებები აქვს. (ორი ერთნაირი სახელის იდენტიფიკატორის დარქმევა არ შეიძლება). 

HTML კოდის ფრაგმენტი:

<h3 id="button">Hello students</h3>
<h3 class="feri">Hello students</h3>
<h3 class="feri">Hello students</h3>
<h3 class="feri">Hello students</h3>
<h3>Hello students</h3>
<h3>Hello students</h3>
<h3>Hello students</h3>
<h3>Hello students</h3>

და css-სტილის კოდი:

h3{
  font-size: 30px;
  color: #1C14FF;
  background-color: #B2F0A9;
}
#button{
  width:300px;
  margin:20px auto;
  background-color: blue;
  border:2px solid red;
  border-radius:20px;
  color: #fff;
  padding:15px;
  font-size:12px;
  text-align:center;
  text-transform: uppercase;
  cursor:pointer;
  transition: all 0.5s;
}
#button:hover{  
    background-color: #fff;
    color: blue;
    padding:10px;
    width:200px;
    font-size:20px;
} 
.feri{
  color:#DB3F2B;
  font-size: 15px;;
}

ყურადღება მიაქციეთ, რომ css ფაილში კლასი წერტილით აღინიშნება, ხოლო იდენტიფიკატორი დიეზით(#).