css-სტილების იდენტიფიკატორი და კლასი

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