Stil Şablonu - CSS

Günümüz bilgi çağıdır ve pek çok ürün ve hizmet, bilgi teknolojileri ile iç içe geçmiĢ durumdadır. Bilgi ne kadar önemliyse sunum da o kadar önemlidir. Ġyi bir sunum ile bilginin çekiciliği, kalıcılığı ve ulaĢılabilirliği artacaktır. Kullanıcı, cep telefonundan, bilgisayarından veya taĢınabilir mobil cihazından sorunsuz bir Ģekilde bilgiye ulaĢmak isteyecektir. Aynı Ģekilde kullanıcı için görsel açıdan zengin, akıcı bir web sayfası daha kalıcı bir nitelik taĢımaktadır. Etrafımıza baktığımızda yüzlerce bina görmekteyiz. Bu binaların çoğunun iskeletinde, temelinde, kullanılan malzeme çok farklı değildir ama hepsinin dıĢ cephe boyası, odaların yerleĢimi, odaların Ģekilleri, balkonların yapısı, kullanıĢlılıkları gibi biçime dayalı birçok özellikleri birbirinden farklıdır. Dolayısıyla bazıları daha dikkatimizi çekmekte ve hoĢumuza gitmektedir. Web tasarımcısı için diğer önemli bir konu, web sayfasının yönetilebilirliğidir. Tasarımcı, sayfaların görünümünü, biçimini kısa sürede güncellenebilecek Ģekilde oluĢturmalıdır. Bunu gerçekleĢtirmek amacıyla, Stil ġablonlarını (CSS) kullanarak içerik (bilgi) ve biçimlendirme (sunum) kısımlarını birbirinden ayırmak gerekir. ĠĢte biz bu modülde biçime dayalı çalıĢacağız, tabii ki sayfamızın kullanılabilirliğini, uyumluluğunu ve performansını göz ardı etmeyeceğiz.


CSS, açılımı “Cascading Style Sheet” olan ve dilimize Stil ġablonları olarak yerleĢen basit ve kullanıĢlı bir iĢaretleme dilidir. Stil Ģablonu HTML ögelerine (yazı, paragraf, kenar çizgisi, resim, bağlantı...) stil vermek amacıyla kullanılır. Diğer bir deyiĢle sayfamızın içeriğinin biçimlendirilme iĢleminin yapıldığı kısımdır. HTML/XHTML etiket dillerinin sayfa tasarımında yetersiz kalması nedeniyle “World Wide Web Consortium” (W3C, Dünya Çapında Ağ Birliği) tarafından oluĢturulmuĢtur; içerik kısmı (HTML) ile biçimlendirme kısmını birbirinden ayırarak yüzlerce sayfayı tek bir dosya ile biçimlendirme olanağı tanımaktadır. Bu, web sayfalarımıza esneklik bize ise hız kazandırır. Tablosuz tasarımın daha da önem kazandığı günümüzde CSS kullanımı olmazsa olmazlardandır.


1.1. CSS’nin Yapısı

CSS‟nin söz dizimi aĢağıda görüldüğü gibi “Seçici” ve “Bildirim” olarak iki ana bölümden oluĢur. Bildirim ise kendi içinde özellik ve değer olarak iki kısma ayrılmaktadır. ġekil 1.1: CSS yapısı
 Seçici olarak tüm HTML etiketlerini kullanabileceğimiz gibi ileride göreceğimiz ID (kimlik) ve Class (sınıf) seçicilerini de kullanabiliriz.
 Bildirim bloğu süslü parantez ile açılır ve kapanır. Bildirimler arasında “;” (noktalı virgül) kullanılır. Her Bildirim, "Özellik" ve "Değer" içerir. Özellik ve değer arası “:” (iki nokta üst üste) ile ayrılır.
 Özellik, değiĢtirilmek istenen stil özniteliğidir. Örnek; color, font-size vb.
 Değer ise stil özniteliklerine verilen değerlerdir. Örnek; blue, 14px vb.
Seçiciler Class (Sınıf), ID ve Tag (etiket) seçiciler olmak üzere üçe ayrılır.