თანამედროვე საიტების აწყობა ხდება ბლოკების საშუალებით. ბლოკებს აქვს უამრავი თვისება: სიგანე, სიგრძე, ფონის ფერი, ჩარჩო და სხვ; ასევე ურთიერთ განლაგება: დაშორება სხვა ბლოკებიდან, თვითონ ბლოკში შიგთავსის განლაგება და ა.შ. ყველაფერი ამის მიღწევა შეიძლება 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"-ს სრულიად სხვა თვისებები აქვს. (ორი ერთნაირი სახელის იდენტიფიკატორის დარქმევა არ შეიძლება).