body{
background:#ECEDF1;
}
hr{
border:3px dotted #F3B247;
}
span{
font-size:40px;
color:#0E2CF1;
}
#main{
width: 900px;
margin: 0 auto;
border:3px solid #F3B247;
background:#A5F1B6;
text-align:center;
}

მხოლოდ HTML ტეგებში დაწერილი საიტი ძალიან უსახურად გამოიყურება. საიტს სილამაზეს აძლევს CSS სტილები. საიტისთვის სტილების მინიჭების სამი ხერხი არსებობს: 1) მიბმული სტილების ფაილით, 2) "ჰედერში" სტილის ჩასმით და 3) პირდაპირ  HTML ტეგში სტილის ჩასმით.
ყველაზე ხშირად გამოიყენება პირველი ვარიანტი. მეორე ვარიანტი გამოიყენება, როცა სტილის ფაილი მცირე სიდიდისაა, ხოლო მესამე ვარიანტი განსაკუთრებულ შემთხვევებში

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

ბლოკების ერთ-ერთი მთავარი თვისებაა განლაგება სხვა ბლოკების მიმართ. თუ გვაქვს ერთმანეთში ჩასმული ორი ბლოკი, მაშინ გარე ბლოკში ჩასმული შიგა ბლოკი მის მიმართ შეგვიძლია განვალაგოთ padding-ის საშუალებით. მაგ:  padding-left: 40px; ნიშნავს, რომ შიგა ბლოკი ამ ბლოკის მარცხენა კიდედან გადაიწევს 40 პიქსელით. ნათქვამის თვალსაჩინოებისათვის მოვიყვან კოდებს და სურათების საშუალებით ავხსნი შედეგებს. 
კითხვა განაგრძეთ "დაწვრილებითში" ->

სათაურში ჩამოთვლილია ბლოკის სხვადასხვა თვისება. HTML და CSS კოდები იხილეთ "დაწვრილებითში". შესაბამისი სურათით.

ფსევდო კლასი ობიექტს ანიჭებს რაიმე თვისებას მაშინ, როცა მასზე ხორციელდება მოქმედება. მაგალითად მაუსის მიტანა ობიექტზე ან დაკლიკება. 
ფსევდო ელემენტი თავდაპირველად არ არის html კოდში.ის გაჩნდება საიტზე css თვისების საშუალებით.
შესაბამისი კოდები და სურათი იხილეთ "დაწვრილებითში"

ჩვენ შეგვიძლია ელემენტებს ფონად დავუყენოთ არა მარტო მონოტონური ფერი, არამედ სხვადასხვა ტიპის გრადიენტი. 
შესაბამისი კოდი მოცემულია "დაწვრილებითში"

ბლოკებს ჩვენ შეგვიძლია ფონად დავუყენოთ სურათი. სურათი შეიძლება გავამრავლოთ ან იქს-ღერძის, ან იგრეკ-ღერძის გასწვრივ. ასევე შეგვიძლია არ გავამრავლოთ, დავაყენოთ ცენტრში ან რომელიმე კუთხეში. გავაკეთოდ ფიქსირებული, შევავსოთ მთელი ბლოკი. 
კოდები იხილეთ "დაწვრილებითში"

CSS ერთერთი ძალიან საჭირო თვისებაა DISPLAY, რომელსაც შეუძლია ელემენტი გააქროს. ეს თვისება გამოიყენება ჩამოშლადი მენიუს დროს.
DISPLAY-ის საშუალებით შეგვიძლია ბლოკური ელემენტი გარდავქმნათ სტრიქონულ ელემენტად და პირიქით, სტრიქონული ელემენტი - ბლოკურად.
DISPLAY-ის ყველა ნმიშვნელობა იხილეთ ბმულზე
გაკვეთილში გამოყენებული კოდი არის "დაწვრილებითში"