Bu bölümde sayfalarımızı, nasıl daha etkin bir biçimde CSS şablonu altına alabiliriz sorusuna cevap bulmaya çalışacağız.
  Bildiğiniz üzere, bağlantılı CSS tekniğini kullanarak tüm sayfalarımızı tek bir dosyadaki bilgilere göre düzenliyebiliyorduk. Eğer CSS yazımızı okumamışsanız, bu yazıyı okumadan önce, kesinlikle CSS yazımızı okumanızı tavsiye ederim. Tüm sayfalarımızın stil şablonunun bulunduğu .css uzantılı bu dosyada; sayfanın zemin rengi, zemin deseni, font türü, tablo ve border renk ve kalınlığına kadar birçok unsuru yönetebiliriz.

    Daha önce CSS sayfamızdaki örneklerde, başına (.) nokta işareti koyarak oluşturduğumuz seçicilerin yanı sıra, istediğimiz herhangi bir HTML etiketini de stillendirebileceğimizi görmüştük. Buna en iyi örnek link oluşturmakta kullandığımız A etiketine stil atayarak, tüm sayfalarımızdaki linklerin şeklini değiştirebilmemizdir.

    Fakat tüm A, Hx, P, FONT, TABLE etiketlerine stil atamak çoğu durumda hem verimli olmayacak, hem de sayfalarda çok büyük karışıklıklara neden olacaktır. Çünkü .css dosyamızda stillendirdiğimiz bir etiketi sayfada başka bir şekilde stillendirmek mümkün olmayacaktır. Bunun için en mantıklısı ve en çok tercih edileni her zaman için seçiciler olmalıdır.

    Örneğin aynı sayfada, çeşitli link ve yazı tipleri göstermek isteyeceğimizden yola çıkarak; menüde, ana bölümde, kenarda, köşede, vesaire de, yazı link ve çeşitli unsurlar için farklı seçiciler oluşturmak, ve bunu sitemizi hayata geçirmeden önce planlamak, çok daha mantıklı ve kullanışlı olacaktır. Bunu başarabilmek tamamiyle, sizin ihtiyaçlarınıza ve üzerinde yeteri kadar uğraşmanıza bağlı. Burada konu ile ilgili çeşitli örnek şablonlar oluşturacağız ve css şablonlarıyla yapabileceğimiz şeyleri sınırlarına kadar getirmeye çalıçacağız.

Örnek Sayfayı Görüntülemek için Tıklayın

    Örnek uzun bir koda sahip olduğu için, hazır bir sayfa şeklinde sunmayı uygun buldum. Sayfanın kaynağını görüntülediğinizde <!-**   **-> işaretleri arasında yapılanlar hakkında bilgiler göreceksiniz. Bu tür bilgileri sizlerde hazırladığınız sayfalara koyarsanız, kodun içinde aradıklarınızı çok daha rahat bulabilirsiniz. Ayrıca kodu rahat inceleyebilmeniz açısından global şablon tekniğini kullandım. Ama sizin tek hamlede değişiklik yapabilmeniz için (zaten amaç o) bağlantılı şablon tekniğini kullanmanız gerekmektedir.

    Style etiketinde kullandığımız BODY ile, normalde BODY etiketinde kullandığımız nerdeyse tüm özellikleri kullanabiliriz. Daha önceden BODY ile kaydırma çubuğunu renklendirmesini görmüştük, burada ise zemin rengi ve zemin deseninin nasıl değiştirileceğini görüyorsunuz. Tabloda kenar çizgisi yapmak için Netscape`de değişik gözükeceğinden border özelliğini kullanamadık. Bunun yerine klasik bir çözüm olan tablo içinde tablo tekniğini kullandık. Yani bir tablo oluşturuyoruz, bu tabloya birşey yazmıyoruz ve bu tabloya verdiğimiz zemin rengi çizgimiz oluyor. Daha sonra içine aynı boyutta başka bir tablo oluşturuyoruz. Gözüken sadece içerideki tablo oluyor, dış tablonun ise cellpadding`e verdiğimiz değer kadar kenarları gözüküyor yani sınır çizgisi.

    Sayfada değişik gözükmesini istediğimiz tüm yazıları, tabloların renk ve içlerindeki yazıların fontlarını Style etiketindeki seçicilere atıyoruz. Bunu tam olarak kavrayabilmeniz için örneği satır satır incelemeniz lazım. Bu az içerik için bile bayağı uğraşmam gerekti. Unutmamanız gereken hazırladığınız şablon üzerinde ne kadar uğraşırsanız sonradan tasarımı değiştirdiğinizde işiniz o kadar kolay olur. Bunu sağlayabilmekte ileride değiştirmek isteyebileceğiniz unsurları şimdiden belirleyebilmenize bağlı.

    Örnekte şablonda, tabloların sadece renk ve içlerindeki yazılarını belirledik ama isterseniz en, boy ve koordinatlarınıda belirleyebilirsiniz. Değişik içerikli tablolarınız varsa zamanı gelince hepsini ayrı ayrı değiştirebileceğinizi düşünerek, hepsine ayrı seçiciler atamalısınız.

    İki ayrı yerde iki ayrı link stili belirledik. Bunu ise seçicinin yanına A:link veya diğerlerini koyarak yaptık. Bu şekilde aynı sayfada birden fazla link tipi belirledik.

    Örnekte ayrıca bir form öğesini de stillendirdik. Formun zemin, border, yazı rengi ve tipini belirledik. Dört kenar için ayrı border renk ve kalınlık atayabilir; Ayrıca cursor: hand özelliğini kullanarak, fareyi üzerine getirdiğinizde imlecin, el şekline dönüşmesini de sağlayabilirsiniz.

    Örnek sayfadaki stilleri kaldırdığınızda sayfanın ne kadar değişik gözüktüğüne şaşıracaksınız. Örnek sayfa bazılarınıza biraz abartılı yada yetersiz veya karmaşık gelebilir, bu gayet normaldir. Sayfalarınızda kendi şablonlarınızı oluşturmanız en verimlisidir.
    Bu yazıdan çıkarakağımız sonuç, CSS stil şablonlarının verimli kullanımının, ihtiyaçlara ve şablonun üzerinde yeteri kadar fazla uğraşılmasına dayandığıdır.