Genel olarak 3 çeşit seçici türü kullanılır;

• Element Seçicisi
• Class Seçicisi
• Id Seçicisi

Element Seçicisi
Bir HTML dokümanında ki belirtilen tüm etiketleri seçerek girilen biçimlendirmeyi uygular. Element seçicisi kullanılırken direk biçimlendirilecek elementin ismi yazılır.

HTML-Kodu:
p {    text-align: center;
    color: red;
}
Bu örnekte p ile oluşturulan tüm paragraflardaki yazılar center kodu ortalanır ve rengi kırmızı olarak belirlenir. Tüm html elementleri bu şekilde biçimlendirilebilir.

ID Seçicisi
HTML dokümanında ki tek bir elementi biçimlendirmek için kullanılır. Id seçicisi kullanılmak istendiğinde bir # işareti ve arkasına herhangi bir isim yazılarak CSS kuralı oluşturulur.

CSS Kısmı

HTML-Kodu:
#paragraf1 {

    text-align: center;

    color: blue;

}
HTML Kısmı

HTML-Kodu:
<p id=”paragraf1”>Bu metin ortalı ve mavi renkli olarak gözükür.</p>

<p> Bu paragraf biçimlendirmeden etkilenmez.</p>
Not: ID Seçicisi kuralları rakam ile başlayamaz.
Class Seçicisi
Class veya sınıf seçicisi bu niteliği atadığımız tüm html etiketlerine belirtilen biçimi uygular. Class seçicisi kullanılmak istendiğinde bir. İşareti arkasına herhangi bir isim yazılarak css kuralı oluşturulur.

CSS Kısmı

HTML-Kodu:
.kirmizi{

    color: red;

}
HTML Kısmı
HTML-Kodu:
<p class=”kirmizi”>Bu metin kırmızı renkli görünür.</p>

<p> Bu paragraf biçimlendirmeden etkilenmez.</p>

<p class=”kirmizi”>Bu metin de kırmızı renkli görünür.</p> biçimlendirmeden etkilenmez.</p>

Birden Fazla Class Seçicisi Kullanımı

HTML-Kodu:
.ortala {

    text-align: center;

}

.kirmizi {

    color:red;

}
Html etiketleri birden fazla class secicisini arka arkaya kullanabilir. Yani;


HTML-Kodu:
<p class="ortala kirmizi">Bu paragrafa 2 adet css kuralı etki etmektedir.</p>
Seçicilerin Gruplanması
Eğer birden fazla HTML etiketine aynı biçimlendirmeyi uygulamak istiyorsak, bu etiketleri gruplayabiliriz. Örneğin;
Kod:
h1 {

    text-align: center;

    color: red;

}

h2 {

   text-align: center;

   color: red;

}

p {

    text-align: center;

    color: red;

}
Bunun yerine şu şekilde kullanabiliriz,


HTML-Kodu:
h1, h2, p {

    text-align: center;

    color: red;

}
CSS Yorum Satırları
Yavaş yavaş css kodlarını yazmaya başladık, Css kodlarını belirli kurallar belirleyerek yazarsanız, baktığınızda anlamanız kolaylaşır. Yorum satırları da css kodlarını anlamamızı kolaylaştıran unsurlardan biridir.

Yazdığınız bir css kodunun ne anlama geldiğini /* Burası yorum */ bu şekilde yorum olarak belirtebilirsiniz.

Ayrıca bir css kodunu denerken silmek yerine yorum biçimine çevirirseniz, geri döndüğünüzde neyi değiştirdiğinizi de kolaylıkla fark edebilirsiniz



aLinti..