CSS'de ID ve Class Seçimi

Bu konuyu  ID ve Class Parametreleri adlı HTML dersimizin bir bölümünde işlemiştik, ama tekrardan hatırlamanız için tekrardan anlatmak istiyorum. 

Class Kullanımı

Bir HTML kaynağına baktığınızda bir etiket özelliği olarak class="baslik" şeklinde bir özellik belirtildiğini görebilirsiniz. Peki neden buna gerek duymuşlar?
Örneğin aşağıdaki HTML kodunu inceleyelim:

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

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

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

Nokta (.) ile başlayan .baslik adında stil oluşturduk ve adını biz verdik. Bu demektir ki class="baslik" ile belirttiğimiz tüm etiketiketler 10 punto Tahoma yazı tipinde ve mavi renginde olacaktır. 

ID Kullanımı

ID özelliği ile de stiller yaratabiliriz. CLASS'tan farklı yanları:

• Sadece tek bir etikette kullanılabilir.
• Aynı id değeri iki etikete verilemez (Her id sadece tek bir etikette kullanılabilir).
• Stil dosyamızda CLASS'da . (nokta) kullanırdık, ancak id özelliğine göre stilleme yapacaksak # (diyez) kullanırız.

Hemen örneklendirelim:

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

Örnekte ID değeri "stil" olan bir DIV etiketini görüyoruz. CSS dosyamızda bu etikete özel stil tasarlarken aşağıdaki şekilde kod yapısını oluşturmalıyız:

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

Görüldüğü gibi bu kez diyez # ile başlattık. Sadece tek bir elemente özel stil tasarlamış olduk.

Ayrıca bir konuya daha değinmek istiyorum. Genellik CSS dersleri yayınlayanlar bu kısmı es geçiyor.

Şimdi bir <div class="metin"> etikitemiz var ve içinde de <p> etiketimiz var ve biz bu <p> etiktenini içinde ki paragrafın rengini sarı yapmak istiyoruz.
Hemen deneyelim:

<div class="metin">
  <p>Merhaba, ben Emin Yılmaz, Yazılım ve Tasarım ile ilgileniyorum.</p>
</div>

<style>
.metin { color:yellow; }
</style>

 yukarıdaki kod .metin adlı class içindeki tüm yazıları sarı yap komutunu verdi ama bu durum ileri düzeyde web tasarımda işinize yaramaz bu yüzden CSS'in bize sunmuş olduğu bir algoritma var. Hemen örneğine bakalım:

<div class="metin">
  <p>Merhaba, ben Emin Yılmaz, Yazılım ve Tasarım ile ilgileniyorum.</p>
</div>

<style>
.metin p { color:yellow; }
</style>

yukarıdaki CSS kodunda şunu dedik. Sadece .metin adlı class'ın içinde ki <p> etiketinin rengini sarı yap. Eğer .metin { color:yellow; } şeklinde yapmış olsaydık <div> içinde ki tüm yazılar sarı olacaktı ama biz algoritmayı kullanarak sadece <p> paragraflarının sarı olmasını belirttik.

Yukarıdaki kodların çıktısını tarayıcıda görerek daha iyi anlayabiliriz.

Umarım anlatabilmişimdir. Özellikle bu konuda aklınıza takılan bir şey olursa soru sor kısmından belirtebilirsiniz.