CSS Dersleri 5 - Class ve ID Kullanımı

CSS ile Class ve ID kullanımı nasıldır ? Class nedir ? ID nasıl kullanılır ? Dersimiz ile bu sorulara cevap veriyoruz.

Taha Furkan Bayar Taha Furkan Bayar
Kasım 16, 2022 - 10:41 Updated: Kasım 2, 2022 - 00:47
0 171
CSS Dersleri 5 - Class ve ID Kullanımı

Class ve ID Kullanımı

Web sayfamızı oluşturduğumuzda, HTML öğelerimize bazı stil özellikleri eklemek istiyoruz. Bazı metinlerin renkli olması gerekebilir, bazı resimlerin küçük olması gerekebilir veya bazı düğmelerin farklı olması gerekebilir, bunun için CSS kullanıyoruz.

Html öğelerine stil niteliklerini nasıl ekleyebileceğimiz aşağıda açıklanmıştır.

<p>Bugün kodluyoruz</p>
<p>Yarın da kodluyoruz<p>
p {
	color: red;
}

Yukarıda gösterildiği gibi, iki farklı <p></p> öğesine kırmızı özellikler ekledik. Peki ya belirli bir <p></p> öğesine istediğimiz herhangi bir özniteliği eklemek istersek? Bu durumda class veya id seçici kullanmamız gerekiyor.

class Kullanımı

Sınıf seçiciler, aynı sınıfa sahip HTML'deki öğelere erişmemizi sağlar.

CSS'de sınıf seçiciler. ile temsil edilen .

.class{
     özellikler
}
<h4>Birinci Başlık</h4>
<h4>İkinci Başlık</h4>
<h4>Üçüncü başlık</h4>

Yukarı örnekte 3 adet <h4> elementi olduğu görülmekte. Bunlardan yalnızca iki tanesine kırmızı renk eklemek istersek class kullanabiliriz.

<h4>Birinci Başlık</h4>
<h4 class="text-red">İkinci Başlık</h4>
<h4>Üçüncü Başlık</h4>

Sonrasında istediğimiz özellikleri ekleyelim.

.text-red{
   color:red;
}

id Kullanımı

Kimlik seçiciler, aynı kimliğe sahip HTML'deki öğelere erişmemize izin verir.

Kimlik seçiciler, CSS'de # ile belirtilir.

Muhtemelen, bir kimlik seçicinin amacı, bir sınıf seçiciden farklı değildir. Her ikisi de belirli HTML öğelerine CSS özellikleri eklemek için kullanılır. Ancak kimlik seçiciler, sınıf seçicilerden biraz farklıdır.

#id {
     özellikler
}

Bir ID sadece bir HTML elementi için kullanılır.

Etiketler: