CSS ბლოკები (DIV)

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

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