# CSS' de ID Ve Class Kullanımı

Kaynak: https://webodasi.com/css-de-id-ve-class-kullanimi/
Yazar: Mahmut Esat Ayancık
Yayın: 2020-06-19
Güncelleme: 2020-07-14

### CSS' de Class Kullanımı

 

Genel olarak bir HTML koduna baktığımızda element biçiminde  **class="stiller"** özelliğini belirttiğini görebilirsiniz.Neden bir class seçimine gerek duymuş olabilirler sizce ? Örnek kodu inceleyelim:

 

```
<div class="webstili">Sitemize Hoş Geldiniz..</div>
```

 

Yukarıdaki div özelliği içinde yer alan class="webstili", o div elementi için CSS özellikleri belirtmemizi sağlayan bir yöntemdir. CSS kodumuzda şu şekilde ifadeler bulunuyorsa:

 

```
.webstili {
font: 20px Tahoma, Verdana;
color: red;
}
```

 

**Nokta (.)** kullanarak bir sınıf oluşturduk ve ismini biz atadık.Bu şu anlama geliyor class="webstili" bulunduran tüm elementler 20 px boyutunda, Tahoma yazı biçiminde ve kırmızı bir yazı tipine sahip olucak.Eğer istersek ki bu tek bir elementte geçerli olsun diye onuda şöyle sağlıyoruz:

 

```
div.webstili { 
font: 20px Tahoma, Verdana; 
color: red; 
}
```

 

**".stil"**  yani seçim ismimizin başına div getirmemiz yeterli olacaktır. Bu özellik sayesinde bu CSS kodu sadece DIV elementlerinde geçerli olacaktır.

 

#### CLASS Özelliği Kullanmanın Bazı Avantajları:

 

•Bir stili birden fazla elementte bulundurabilmek

•Kendimizin adlandırdığı özel stiller oluşturup kullanmak

•Stillere CSS de yer verip HTML kodlarımızı sürekli tekrarlanan uzun CSS kodlarından kurtarmak

 

![CSS ID ve Class](https://webodasi.com/wp-content/uploads/2020/06/images-4.png)

 

### CSS' de ID Kullanımı

 

```
<div id="webstili">Sitemize Hoş Geldiniz...</div>
```

 

Yukarıda ki örnek kod da ID değeri "webstili" olan bir element bulunuyor.CSS kodlarımızı oluştururken ID'leri şu şekilde çağırmaktayız:

 

```
#webstili { 
font: 20px Tahoma, Verdana; 
color: red;
}
```

 

Bu sefer ki örnekte ise ID'imizi diyez (#) işareti ile çağırmış olduk.ID' yi burda kullanma amacımız sadece o belirtiğimiz elemente stil vermesini sağlamaktı.

 

#### ID Seçiminde ki Bazı Kurallar!

 

•ID ye isim verirken rakamları kullanmamamız gerekir.
•ID sadece bir elemente verilen özel bir addır o yüzden her elemente aynı ID' yi veremeyiz.

 

#### ID' yi Class' dan Ayıran İki Önemli Özellik

 

•ID sadece tek bir elementte verilebilir.
•Class ise birden çok elemente verilebilir.

•ID' de stilleme yaparken diyez (#)
•Class stilleme yaparken ise (.) kullanırız

 

Bir önceki yazımızda ise size CSS' in genel kod yapısından bahsetmiştik, o yazımıza ise  **[buradan](https://webodasi.com/css-nedir-ne-ise-yarar-css-kullanmanin-avantajlari/)**  ulaşabilirsiniz.

 

Umarım bloğumuzu faydalı bulmuşsunuzdur bugün sizlere  **CSS' de ID ve Class** kullanımını kısaca anlatmaya çalıştık alakalı elimizden geldiğince bilgi vermeye çalıştık sürçü lisan ettiysek affola diyerek cümlemize son noktayı koyuyoruz.