CSS Seçiciler - Id & Class Selector

Seçiciler, Id ve Class olmak üzere ikiye ayrılır.

CSS Tekil Seçici - Id Selector

Daha önce HTML/XHTML etiketlerine stil vermeyi görmüştük. Örneğin " p " etiketine stil verdiğimizde tüm " p " etiketlerinde bu stilin olacağını biliyoruz. Eğer biz sadece tek bir " p " etiketinde stilimiz gözüksün istiyorsak Id Seçicisini kullanacağız. Id Seçicisi, bir kez kullanılabilir. Örneğin sadece tek bir paragrafa stil vereceksek ve bu stili başka hiçbir yerde kullanmayacaksak " p " etiketi içine id="isim" yazacağız. "isim" olarak belirttiğimiz yere istediğimiz isimi yazabiliriz, kodumuzu daha sonra bu isim ile CSS kodunda çağıracağız. (İsim, rakamla başlamamalı ve Türkçe karakter içermemelidir.)

CSS İpucu - Dosyalama Mantığı

HTML/XHTML kodumuz ile CSS kodumuzu aynı klasör içinde tutmalıyız. Örneğin, sercaneraslan.com diye bir sayfa yazıyoruz. sercaneraslan.com adı ile bir klasör oluşturmalıyız ve tüm dosyalarımızı bu klasör içinde tutmalıyız. Hatta herşeyi bir klasör içine almayız mesela, görsellerimizi "images" klasörü içinde CSS dosyalarımızı "styles" klasörü içinde ve büyük sayfaların alt sayfalarını da bir klasör içinde tutmalıyız. Böylelikle herşey sistemli bir hale gelecektir.

CSS İpucu - Klasör Çağırma Mantığı

Örneğin bizim CSS dosyamız "styles" klasörümüzün içinde "style.css" adı ile kayıtlı. Biz HTML/XHTML kodumuzda "link" etiketi içinde bu dosyayı "styles/style.css" olarak çağıracağız. Eğer HTML/XHTML kodumuz alt bir klasör içinde olsaydı "../styles/style.css" olarak çağırmamız gerekecekti. ( " ../ " karakterleri "bir üst klasöre çıkıp bak" anlamına gelmektedir. )

HTML/XHTML kodumuzu nasıl yazdık görelim...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

 <head>

 <meta http-equiv="content-type" content="text/html; charset=utf-8;" />

 <link rel="stylesheet" type="text/css" href="styles/style.css" />

 <title>Başlık Buraya</title>

 </head>

 <body>

 İçerik Buraya

 </body>

</html>

Şimdi HTML/XHTML etiketine verdiğimiz "Id" yi CSS kodunda çağıralım. CSS kodumuzu yazarken "#" ile başlayıp boşluk vermeden "Id" ismini yazıyoruz ( #paragraf_stilim ). Sonrasında ise CSS yazım kuralını uyguluyoruz ( #paragraf_stilim {color:blue;} ). color:blue; renk, mavi olsun anlamına gelmektedir. Renkleri bir sonra ki konuda ele alacağız.

#paragraf_stilim {
color:blue;
}

Paragrafımızın tarayıcıda nasıl gözüktüğünü görelim.

CSS Çoğul Seçici - Class Selector

Class Seçicisi, birden fazla kez kullanılabilir. Örneğin, color:blue; (yazı rengi mavi) olsun istediğimiz tüm etiketlere sayısız kere Class Seçicisi verebiliriz. Id Seçicisinde " p " etiketi içine id="isim" yazıyorduk, Class Seçicisinde ise " id " yerine "class" yazacağız ( class="isim" ).

HTML/XHTML kodumuz nasıl yazılmalı görelim...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

 <head>

 <meta http-equiv="content-type" content="text/html; charset=utf-8;" />

 <link rel="stylesheet" type="text/css" href="styles/style.css" />

 <title>Başlık Buraya</title>

 </head>

 <body>

 Bu içerik mavi renk.

 Bu içerikte mavi renk.

 </body>

</html>

Id Seçicisinin CSS kodunu yazarken "#" karakterini kullanıyorduk. Class Seçicisinde ise " . " (nokta) karakterini kullanacağız. ( .paragraf_stilim {color:blue;} )

.paragraf_stilim {
color:blue;
}

Paragrafımızın tarayıcıda nasıl gözüktüğünü görelim.