CSS Class ve ID Kullanımı (Sınıf Seçiciler)

Web sitelerimizi tasarlarken kullandığımız elementlere CSS ile stiller veririz. Bu elementlere stil dosyasından, yani CSS dosyasından ulaşabilmemiz ve müdahale edebilmemiz için bu elementlerin birer isimleri olmalı. Burada yardımımıza class ve id parametreleri yetişiyor. Bu yazımızda CSS class ve id kullanımı konusunu anlatacağız.

Class ve Id Nedir ?

Yukarıda da belirttiğimiz üzere, HTML elemanlarına ulaşabilmek için class ve id’leri kullanıyoruz. Peki bu iki parametrenin farkı nedir diye düşünebilirsiniz. Sırasıyla açıklayalım.

ID : Id ile nesneye kimlik atarız. Tıpkı kimlik numarası gibi eşsiz bir kavram atanarak belirlenen nesnenin özelliğini sadece ona özel kılmaktadır.

Class : Genel olarak id ile aynı özelliklere sahiptir. Fakat id gibi tek bir nesneye değil, isteğe bağlı olarak birden fazla nesneye atanabilir.

CSS’de ID Kullanımı

Yukarıda da belirttiğimiz üzere, id özelliği ile bir nesneye stiller tanımlayabiliyoruz. Öncelikle stil vermek istediğimiz nesnenin etiketleri içerisine id=”stil-ismi” şekilde parametremizi yazıyoruz. Ardından, CSS dosyasından istediğimiz değişiklikleri yapabiliriz. Fakat bunu yaparken bazı kullara dikkat etmemiz gerekiyor. Hemen bu kuralları görelim.

• Sadece tek bir nesneye aynı id değerini verilebilirsiniz.
• Css dosyamızdan bir id’ye ulaşmak istiyorsak #(diyez) işareti ile ulaşırız.

CSS ID Örnek Kullanımı

Hemen örneğimizi görelim.

<div id="stil-ismi">Evrensel Kod</div>

#stil-ismi {
       color: red;
       font-size: 15px;
}

CSS’de Class Kullanımı

Bir diğer stil verme elemanımız ise class. ID’ye benzer olarak çncelikle stil vermek istediğimiz nesnenin etiketleri içerisine class=”stil-ismi” şekilde parametremizi yazıyoruz. Ardından, CSS dosyasından istediğimiz değişiklikleri yapabiliriz. ID’de olduğu gibi, class içinde bazı kurallar var. Hemen görelim.

• Bir veya birden fazla nesneye aynı class değerini verilebilirsiniz.
• Css dosyamızdan bir class’a ulaşmak istiyorsak .(nokta) işareti ile ulaşırız.

CSS Class Örnek Kullanımı

Class içinde bir örnek görelim.

<div class="stil-ismi">Evrensel Kod</div>

.stil-ismi {
       color: white;
       font-size: 15px;
}

Bu yazımızda CSS id ve class kullanımı konusunu işledik. Diğer CSS derslerimize ulaşmak isterseniz buradan tümüne ulaşabilirsiniz.