Merhaba,

Artık CSS’in ne olduğunu biliyoruz. Nasıl yazıldığı konusunda fikir edindik ancak şimdi daha detaylı inceleyelim.

seçici { özellik: değer; }

CSS kodu örnek olarak yukarıdaki şekilde yazılıyor. Burada kullandığımız öğeler:

seçici: Uygulayacağımız stilin kime/neye uygulanacağını söyler.

özellik: Hangi stil özelliğini kullanacağımızı söyler.

değer: Stil özelliğine hangi değeri atadığımızı söyler.

kime{ ne: nasıl; }

Küçük bir örnekle tekrar edecek olursak:

<p>Bu bir paragraf.</p>

Yukarıdaki HTML kodumuza uygulanacak bir CSS yazalım:

p { color: red; }

Burada kim? sorusuna <p> cevabı verdik. Yani eğer bir paragraf etiketi kullanılıyorsa bu stil özelliğini kullanmasını söyledik. ne? sorusuna color cevabı verdik. Yani paragraf etiketimizin rengi ile ilgili bir özellik belirteceğimizi söylemiş olduk. Son olarak nasıl? sorusuna red cevabı verdik. Yani paragraf etiketlerimizin renk özelliklerinin kırmızı olmasını istediğimizi belirtmiş olduk.

Birden Fazla Özellik

Yukarıdaki örnekte paragrafa kırmızı renk özelliği verdik. Fakat birden fazla stil özelliği de vermek isteyebiliriz. O halde özellik ve değerlerimizi yazdığımız süslü parantez içerisine birden fazla özellik:değer; vermemiz gerekiyor.

p { 
   color: red;
   background: yellow;
}

Burada paragraf etiketimize 2 tane stil özelliği verdik. color özelliğini kullanarak paragrafımızın rengini kırmızı yaptık, background özelliğini kullanarak paragrafımıza sarı bir arkaplan rengi tanımladık. Burada bir sınırımız yok. İhtiyaç duyduğumuz kadar özellik ekleyebiliriz.

CSS’de Aynı Özelliği Birden Fazla Öğeye Uygulamak

İki farklı öğe aynı stil özelliklerine sahip olacaksa ikisi için de aynı CSS kodlarını tekrar yazmaya gerek yok. 

p, h1 { 
   color: red;
   background: yellow;
}

Burada seçicimize hem <p> hem de <h1> etiketlerimizi yazdık. Bu sayede bu iki metin etiketi de verdiğimiz stil özelliklerini taşıyacak. Burada bir sınırımız yok. İhtiyaç duyduğumuz kadar farklı seçiciyi virgül ile ayırarak ekleyebiliriz.

CSS Seçicileri

Yukarıdaki örneklerde CSS özelliklerimizi doğrudan HTML etiketlerimize verdik. Öyle ki bu verdiğimiz özellikler sayfada kaç tane bu etiketten varsa, hepsinin stil özelliği olarak uygulanacaktır. Paragraf etiketimize kırmızı renk atadığımız için, sayfamızdaki bütün paragraf etiketleri kırmızı olacaktır.

CLASS

Class değerlerimiz aslında adı üstünde Türkçe karşılığı ile sınıflandırma işlemi yapar. Örnek vermek gerekirse, sayfamızda önemli olduğunu düşündüğümüz paragrafların kırmızı yazılmasını istiyoruz. Ancak bütün paragraflar kırmızı olmamalı, sadece önemli olarak sınıflandırdıklarımız kırmızı olmalı. O halde HTML kodumuzda, bu önemli paragrafların hangi sınıftan olduğunu söylemeliyiz.

<p>Bu yazı o kadar da önemli değil.</p>
<p class="onemli">Ama bu yazımız önemli.</p>
<p>Bu da önemli değil.</p>

Burada sadece 2. paragrafı önemli sınıfına koyduk. Peki nedir bu önemli sınıfının özelliği? sorusuna da CSS de cevap vereceğiz.

.onemli { 
   color: red;
   background: yellow;
}

Artık önemli sınıfındakilerin özelliklerini biliyoruz. Kırmızı renkli ve sarı arkaplanlı. Artık HTML kodumuzda istediğimiz kadar öğeyi bu sınıfa tanımlayabiliriz.

Burada dikkat etmemiz gereken nokta, doğrudan etikete stil özelliği verdiğimizde CSS yazarken sadece etiketin ismini yazdık. Fakat class/sınıf özelliklerini yazmak için kendi tanımlamış olduğumuz “onemli” sınıfının başına nokta (.) koyarak sınıf özelliklerimizi oluşturmuş olduk.

ID

Peki illa ki bir sınıf veya etikete mi CSS özelliği tanımlanabilir? Tek bir öğeye özel CSS özelliği verilemez mi? Tabi ki verilebilir. Bu sefer de ID özelliği kullanmamız gerekir. ID benzersiz bir isimlendirmedir. Sayfa içerisindeki belli bir HTML etiketini diğerlerinden ayırır.

<p>Bu yazı önemli değil.</p>
<p class="onemli">Ama bu yazımız önemli.</p>
<p id="turuncu">Bu da önemli değil ama bu paragrafı sevdim rengi turuncu olsun.</p>

Bu örnekte ilk paragrafımıza herhangi bir tanımlama yapmadık. İkinci paragrafımızın onemli sınıfından olduğunu söyledik. Üçüncü paragrafımızın da IDsinin turuncu olduğunu söyledik.

.onemli { 
   color: red;
   background: yellow;
}

#turuncu { 
   color:orange;
}

CSS kodlarımızı da oluşturduğumuza göre, artık “onemli” sınıfındaki paragraflar kırmızı yazılacak ve sarı bir arkaplanı olacak. “turuncu” IDsine sahip olan etiketimiz de turuncu renk ile yazılacak.

ID Benzersizdir. Bir sayfada aynı ID yalnızca 1 kere kullanılabilir. Sınıf üzerinden değil ID üzerinden bir CSS tanımlaması yapıyorsak, yine kendi belirlediğimiz ID değerinin başına  # işareti koyarak belirli bir IDdeki etiketin stil özellikleri için çalıştığımızı söylemiş oluyoruz.