İnternette gezdiğiniz her renkli, düzenli ve göz alıcı web sayfasının arkasında CSS var. Peki bu üç harfli kısaltma tam olarak ne anlama geliyor? Basitçe söylemek gerekirse, CSS (Cascading Style Sheets) bir web sitesinin görünümünü kontrol eden dildir. HTML sayfanın iskeletini oluştururken, CSS ona et, kemik ve güzel bir cilt kazandırır. Renklerden yazı tiplerine, sayfa düzeninden animasyonlara kadar her şey CSS ile şekillenir.
Günümüzde neredeyse her profesyonel web sitesi CSS kullanır. Hatta bu makaleyi okuduğunuz sayfa bile CSS olmadan sadece düz metin halinde görünürdü. Teknoloji o kadar ilerledi ki artık CSS ile karmaşık grafikler, hatta basit oyunlar bile yapılabiliyor. Kısacası CSS, web’in görsel dünyasının mimarıdır.
Geliştiriciler için CSS öğrenmek, bir ressamın fırça tutmayı öğrenmesi gibidir. Temel mantığı kavradıktan sonra yaratıcılığınızı konuşturabilirsiniz. Üstelik son yıllarda gelen CSS3 ve yeni modüller sayesinde daha önce JavaScript gerektiren pek çok işlemi artık CSS ile yapmak mümkün.
Temel Kavramlar ve Tanımlar
CSS’in kalbinde üç temel kavram yatar: seçiciler (selectors), özellikler (properties) ve değerler (values). Seçiciler, hangi HTML elementini stilize edeceğinizi belirler. Örneğin `p` seçicisi tüm paragrafları seçer. Özellikler ise neyi değiştireceğinizi söyler: `color`, `font-size`, `margin` gibi. Değerler de bu özelliklere atadığınız sayısal veya metinsel ifadelerdir.
CSS’in en kritik özelliği “cascading” yani “basamaklanma”dır. Birden fazla stil kuralı aynı elemente uygulandığında, hangisinin geçerli olacağını belirleyen bir hiyerarşi vardır. Öncelik sırası genelde: tarayıcı varsayılanları < harici stil dosyası < sayfa içi stil < satır içi stil şeklindedir. Ayrıca seçicilerin özgüllük (specificity) değeri de önemli rol oynar; ID seçici, class seçiciden daha yüksek önceliğe sahiptir.
CSS kodlarını web sayfasına eklemenin üç yolu vardır. En yaygını harici (external) CSS dosyası kullanmaktır: `` etiketiyle `.css` uzantılı bir dosyayı HTML’e bağlarsınız. Bu yöntem bakımı kolaylaştırır ve sayfa hızını artırır. İkinci yol sayfa içi (internal) CSS’tir: `