Web geliştirme dünyasında CSS, sayfanın görünümünü ve düzenini belirleyen çok önemli bir teknolojidir. CSS kullanarak HTML öğelerine stil vermek için çeşitli seçicilerden faydalanırız. Bu makalede, en sık kullanılan seçicilerden biri olan class (sınıf) seçicisini detaylıca ele alacağız. Eğer daha önce CSS ile çalıştıysanız, element seçicisi (örneğin p, h1, div gibi etiket isimleriyle yapılan seçimler) hakkında bilgi sahibi olabilirsiniz. Ancak, bazen belirli bir grup öğeye aynı stil vermek istediğimizde element seçicileri yetersiz kalabilir. İşte bu noktada class seçicisi devreye girer.
Class Nedir?
Bir class (sınıf), HTML öğelerine uygulanan bir etikettir. HTML’de bir öğeye sınıf atayarak, o öğeyi diğerlerinden ayırt edebilir ve CSS ile özel stil verebiliriz. Ancak bir sınıfın en büyük avantajı, birden fazla öğeye uygulanabilmesidir. Yani aynı sınıfı farklı öğelere ekleyerek, hepsine ortak bir stil verebiliriz.
Bunu bir örnekle açıklayalım:
Diyelim ki bir ürün listesi oluşturuyoruz ve belirli ürünleri öne çıkarmak istiyoruz. Örneğin, “İndirimde”, “Yeni Ürün” ve “Popüler” etiketleri için farklı bir stil uygulamak istiyoruz. İşte burada class kullanarak bu öğeleri gruplandırabiliriz.
HTML’de Class Kullanımı
Öncelikle, class nasıl tanımlanır ve kullanılır, bunu görelim.
Bir HTML öğesine sınıf eklemek için class özniteliğini kullanırız:
<span class="etiket">İndirimde</span>
<span class="etiket">Yeni Ürün</span>
<span class="etiket">Popüler</span>
Yukarıdaki örnekte üç farklı span öğesine “etiket” adlı bir sınıf atadık. Şu an için bu sınıfın bir etkisi yok, ancak CSS ile bu öğeleri şekillendirebiliriz.
CSS ile Class Seçici Kullanımı
CSS’te bir sınıf seçici tanımlamak için nokta (.) sembolü kullanılır. Bu, ID seçicisinde kullanılan # sembolünden farklıdır.
Şimdi, .etiket sınıfını seçerek ona bazı stiller ekleyelim:
.etiket {
background-color: coral; /* Arka plan rengini turuncu yap */
color: white; /* Yazı rengini beyaz yap */
font-size: 16px; /* Yazı boyutunu büyüt */
padding: 8px 12px; /* İç boşluk ekle */
border-radius: 8px; /* Köşeleri yuvarlat */
}
Bu CSS kodları, .etiket sınıfına sahip olan tüm öğelerin arka planını turuncu yapar, yazı rengini beyaz yapar, köşelerini yuvarlatır ve iç boşluk ekleyerek daha estetik bir görünüm kazandırır.
Sonuç olarak, HTML ve CSS birlikte şu şekilde çalışır:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Class Kullanımı</title>
<style>
.etiket {
background-color: coral;
color: white;
font-size: 16px;
padding: 8px 12px;
border-radius: 8px;
}
</style>
</head>
<body>
<h1>Ürün Listesi</h1>
<p>Bu ürün, <span class="etiket">İndirimde</span> kategorisine aittir.</p>
<p>Bu ürün, <span class="etiket">Yeni Ürün</span> kategorisine aittir.</p>
<p>Bu ürün, <span class="etiket">Popüler</span> kategorisine aittir.</p>
</body>
</html>
Bu kod çalıştırıldığında İndirimde, Yeni Ürün ve Popüler kelimeleri turuncu arka planlı ve yuvarlak köşeli bir etiket şeklinde görüntülenecektir.
Class ile ID Arasındaki Fark Nedir?
Sınıflar ve ID’ler (kimlikler) HTML öğelerine stil vermek için kullanılır, ancak aralarında önemli bir fark vardır:
| Özellik | Class (.sınıf kullanılır) | ID (#id kullanılır) |
|---|
| Tekrar Kullanılabilirlik | Birden fazla öğeye uygulanabilir. | Yalnızca tek bir öğeye uygulanabilir. |
| CSS Seçici Sembolü | . (nokta) kullanılır. | # (kare/hash) kullanılır. |
| Örnek Kullanım | .etiket { color: red; } | #urunBaslik { color: blue; } |
| Kullanım Amacı | Belirli gruptaki öğelere ortak stil vermek. | Tek bir öğeye özel stil vermek. |
Örneğin, id kullanarak tek bir başlığa özel bir stil verebiliriz:
<h1 id="urunBaslik">Özel Ürün</h1>
Ve CSS’te bunu şu şekilde seçebiliriz:
#urunBaslik {
color: blue;
font-size: 24px;
}
Ancak genellikle class’lar ID’lerden daha çok kullanılır, çünkü web sitelerinde aynı türde öğelere topluca stil vermek daha yaygındır.
Sonuç ve Özet
Bu makalede, class seçicisinin ne olduğunu ve nasıl kullanıldığını öğrendik.
- Class (sınıf) seçicisi, birden fazla HTML öğesine aynı stil vermek için kullanılır.
- Class tanımlamak için
class özniteliğini kullanırız.
- CSS’te class seçicisini kullanırken nokta (
.) sembolü ile seçeriz.
- Class, ID’den farklı olarak birden fazla öğeye uygulanabilir.
Özellikle modern web sitelerinde, aynı türde öğeleri gruplamak ve ortak stil vermek için class seçicileri oldukça sık kullanılır. Eğer CSS öğrenmeye yeni başladıysanız, class ve ID seçicileri arasındaki farkı iyi kavramanız, ilerleyen aşamalarda size büyük kolaylık sağlayacaktır.
Umarım bu yazı, CSS class seçicisi konusunda aklınızdaki soruları yanıtlamıştır. Eğer herhangi bir sorunuz varsa, yorumlarda paylaşabilirsiniz!