Css ID Ve Class Seçicileri

CSS'de oldukça kafa karıştıran bir konudur ID ve class. Bazen hangisini nerede kullanacağınızı kestiremeyebilirsiniz o yüzden rastgele kullanmışlarınız vardır aranızda.Bu yüzden sizlere bu yazımda ID Ve Class arasındaki farkı anlatmaya çalışacağım.İlk olarak ID ve Class nedir onu açıklayalım.


ID= ingilizce "Identity" kelimesinin kısaltılmışıdır ve Türkçe "Kimlik" anlamına gelmektedir. Tek bir varlığı tanımlar. Örneğin; hepimizin bir kimlik numarası vardır ve hiçbiri aynı değildir. HTML'de ID, tek bir element için kullanılır. Genellikle header, footer, navbar, sidebar gibi tekrar etmeyen alanları tanımlamak için kullanılır. Her sayfada ortak olarak kullanılan ID olabilir (header, footer, ...) ancak tek sayfada aynı isimde birden fazla ID olmamalıdır.


CSS'de   # (diyez)   işareti ile kullanılır.

Örneğin;

 <div id="stil">Hoş Geldiniz!</div>

Örnekte ID değeri "stil" olan bir DIV elementi görüyoruz. 

CSS dosyamızda bu elemente özel stil tasarlarken aşağıdaki 

şekilde kod yapısını oluşturmalıyız:



   #stil {
      font: 10pt Tahoma, Verdana;
      color: blue;
   }

Class= ID'lere benzer lakin amaçları farklıdır. ID'nin aksine tek sayfa içerisinde birçok kez tanımlanabilir. Sayfa içerisinde aynı özellikleri taşıyan yerler varsa özellikle yazı stilleri gibi (örneğin; başlıkların aynı renkte ya da boyutta olduğu yerler) Classkullanılmalıdır. Class'lar ID'de olduğu gibi Javascript içinde de olabilir.


CSS'de  . (nokta)  işareti ile kullanılır.

Örneğin;

 <div class="stil">Hoş Geldiniz!</div>
   

Yukarıdaki div elementi içinde yer alan class="stil", o div elementi için CSS özellikleri belirtmemizi sağlayan bir yoldur. CSS dosyamızda şu şekilde bir ifade varsa:

   .stil {
      font: 10pt Tahoma, Verdana;
      color: blue;
   }