CSS ID ve Class Kullanımı

Class Kullanımı

HTML etiketleri  için stiller belirleyebildiğiniz gibi size özel stiller belirleyip elementlerin “id” ve “class” özelliklerinde bu stili belirterek de kullanabilirsiniz.

Yukarıdaki div etiketi  içinde yer alan class=”etiket”, o div elementi için CSS özellikleri belirtmemizi sağlayan bir yoldur. CSS dosyamızda şu şekilde bir ifade varsa:.etiket { yazı tipi: 20px Arial ; kırmızı renk; }

Nokta (.) ile başlayan bir stil oluşturduk ve adını biz verdik. Bu demektir ki class=”etiket” ile belirttiğimiz tüm elementler 10 punto Arial yazı tipinde ve kırmızı (red) renginde olacaktır. Tabi istersek sadece tek bir elementte geçerli olmasını sağlayabiliriz. Örneğin sadece DIV elementlerinde geçerli olmasını istiyorsak:

“.etiket” yani seçim adımızın başına div getirmemiz yeterli olacaktır. Bu durumda bu CSS kodu sadece DIV elementlerinde kullanılabilir olacaktır.

CLASS özelliği kullanmanın bize sağlayacağı yararlara şöyle bir bakalım:

• Kendimizin adlandırdığı özel stiller yaratmak ve kullanmak
• Bir stili birden fazla etikette kullanabilmek
• Stillere CSS de yer verip HTML kodlarımızı sürekli tekrarlanan uzun CSS kodlarından arındırmak

ID Kullanımı

Bu kez diyez (#) ile başlattık. Sadece tek bir elemente özel stil tasarlamış olduk (Neden? Çünkü başka bir etikete yine id değeri “stil” belirtilemez.)

• •  ID değeri rakamla başlamaz.
  • ID, HTML dosyasında o etiketi bulmamızı sağlar, bu nedenle aynı ismi veremeyiz. Aynı ismi vermemizin diğer yaratacağı sorun Java Script’te bu elementi id özelliğine göre kullanamamak olacaktır.
  •  Bazı tarayıcılar birden fazla aynı id kullanılan HTML dosyalarında stilleri görmezden gelebilir.