css

CSS, html etiketlerini biçimlendirmek için kullanılan kodlara denir. ( İngilizce olarak Cascading Style Sheets )

HTML ile CSS birlikte kullanılır. CSS kullanmadan sade Html etiketleri ile web siteleri oluşturulabilir, fakat bu siteler görsel ve kullanım açısından hoş olmayacaktır.

Bu yazımda sizlere css nedir, nasıl yazılır ve nereye yazılır sorularının cevabını vermeye çalışacağım.

Şöyle düşünün, html ile bir başlık oluşturduk. Bu başlığın kırmızı mı mavi mi olacağını, büyük mü küçük mü olacağını, sayfanın ortasında mı solunda mı duracağını html bilmez. Bunların hepsine css karar verir.

css nasıl yazılır?

css kodlarının yazımı her zaman aynı kalıptadır.

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

örnek verecek olursak,

h1 {
    color: blue;
    font-size: 24px;
}

Burada h1 seçicimiz, yani bu kuralların hangi etikete uygulanacağını söyleyen kısım. color ve font-size özelliklerimiz, blue ve 24px ise bu özelliklerin değerleri. Sonuç olarak sayfadaki tüm h1 etiketleri mavi renkte ve 24 piksel büyüklüğünde görünür. Her özellikten sonra noktalı virgül koymayı unutmayın.

seçiciler

css kurallarını sadece etiket ismine göre değil class ve id değerlerine göre de uygulayabiliriz.

  • etiket seçici : p { } sayfadaki tüm p etiketlerini seçer.
  • class seçici : .kutu { } class="kutu" olan tüm etiketleri seçer. başına nokta konur.
  • id seçici : #baslik { } id="baslik" olan etiketi seçer. başına diyez konur.

class ve id kullanımını CSS Kullanımı yazımda örnekleri ile anlattım.

css nereye yazılır?

css kodlarını 3 farklı yere yazabiliriz.

Bunların her birini ayrı yazılarda anlattım. En çok kullanılan ve en mantıklı olanı üçüncüsü, yani harici css dosyasıdır.

peki cascading ne demek?

Cascading kelimesi basamaklı yada kademeli anlamına geliyor. Bir etikete birden fazla yerden css kuralı uygulanabilir ve bu kurallar birbirini ezebilir. Mesela harici css dosyasında h1 için mavi renk, etiketin üzerinde ise kırmızı renk yazdıysanız başlık kırmızı görünür. Etikete daha yakın olan kural kazanır. Aynı yerde aynı özellik iki kez yazılmışsa da sonra yazılan geçerli olur.

css öğrenmeye başlamadan önce html bilmeniz gerekiyor. html konusunda eksikleriniz varsa Html ve Html5 Nedir? yazımdan başlayabilirsiniz.