Hemen hemen hepimiz Microsoft Word programını kullanmışızdır. Css ‘i Word’teki “Stil” yapısına benzetebiliriz. Word’te belirlemiş olduğumuz stilleri nasıl istediğimiz yerde uygulayabiliyorsak,
CSS (Cascading Style Sheets – Stil Sablonları) ‘te , Web dokümanlarına stil eklemek için kullanılan basit ve güçlü bir dildir. Web sayfalarının yapılarını düsündügümüzde 3 kısma ayıra biliriz. çerik kısmı, biçimlendirme kısmı ve dinamik kısım.İçerik kısmı, HTML kodlarını içeren sayfa asıl içerigini olusturan birimleri oluşturma kısımdır. Bu kısım genelde metinlerden olussa da, resim, animasyon ve video gibi elemanlarıda içerir.Biçimlendirme kısmı, içerik kısmını kullanıcıya nasıl görüntülenecegini gösteren kısımdır. Sayfanın biçimini belirler. Kullanıcıya daha okunaklı ve kullanıslı sayfa sunmak için gerekli elemanları içerir. Dinamik kısım, Javascript ile yapılan dinamik islemleri içerir. Etkileşimli
sayfalar oluşturmak için kullanılır. Eskiden ki hala bu sekilde kodlama yapanlar mevcut. çerik kısmı ve biçimlendirme kısmı içi içe kodlama yapardık, örnegin yazıtipi tanımı için <font> etiketini kullanırdık. Eski kodlama yöntemi ile zaman, hız ve erişebilirlik açısından büyük kayıplarımız vardı. CSS biçimlendirme kısmının yönetimini sağlamak için kullanılır.
İ çerik kısmı ile biçimlendirme kısmının ayrılmasını saglayan CSS bize birçok avantajlar saglar. Örnegi 10.000 sayfası olan bir siteyi tek css dokümanı yardımı ile biçimlendirmemizi saglar. CSS 1996Vda W3C tarafından duyuruldu. Son olarak(Ocak 2003’den beri) CSS2.1 sürümü yürürlüktedir. CSS3.0Vda çalısmaları devam etmektedir. CSS3.0 için ayrıntılı bilgiye http://www.w3c.org/Style/CSS/current-work adresinden ulasabilirsiniz. Tablosuz Web Sayfası kodlama teknigini kullanmayanlar CSS’in ehemmiyetini tam olarak anlayamayacaktır.
CSS’in Avantajları
1. Html’ye göre daha çok biçimlendirme seçenekleri mevcuttur.
<h1>Doğuş Efe | Blog</h1>
HTML’de bu elemanın(h1) kalın, altı çizili, Artalan rengi kırmızı olarak atama gibi çesitli özellikler verebiliriz. Ancak bu özellikleri atamak içinde ayrı HTML elemanları kullanmak zorundayız (<strong>, <u>), ancak CSS’de bunu tek bir elemanla yapabiliriz ve ayrıca daha fazla stil özellikleri de atayabiliriz.(örn: kenarlık, rollover vs stillerini ekleyebiliriz.)
h1 {
color: white;
font: italic 11px Arial, serif;
text-decoration: underline;
background: yellow url(arkaplan.gif) repeat-x;
border: 1px solid red;
margin-bottom: 0;
padding: 5px;
}
2.Kullanım Kolaylığı
HTML’de her etikete artı özellikler eklemek için baska bir etiket ve/veya özellik eklememiz gerekmektedir. Bu islemi genis çaplı bir sitede yaptıgımızı düsünürseniz çok büyük zaman kaybı ve uğras gerektiğini göreceksiniz.
<h1><font color=”blue”>Doğuş Efe</font></h1>
Bunun gibi onlarca veya yüzlerce baslıgınız oldugunu düsünün, gerçekten çok zor. CSS’de aynı işlem için
h1 {color: blue}
Kodunu yazmamız yeterli. Bu elemanın özelliklerinde degisiklik yapmak istedigimizde sadece burada degistirerek tüm sitede bu elemanın özelliklerini degistirmis olacagız. Ayrıca bu islemi sadece bu etiket için değil diğer etiketlere de uygulayabiliriz.
h1, h2 {color: blue}
Ayrıca tek bir CSS dosyası ile sitenin tamamını yönetmek web kodlamacıları için çok büyük kolaylıktır. Sadece bir dosyada degislik yaparak tüm sitemizi ara yüzünü yönetebiliriz isterse yüzlerce sayfa olsun.
3.Tasarım Tutarlılığı
Tek CSS dosyası ile tüm sitenizi yönetebilirsiniz, bu özellik sayesinde siteniz tutarlılık kazanacaktır. Web sayfanızdaki ilk sayfadan son sayfaya kadar tutarlılıgınızı koruyarak ziyaretçinize düzenli bir içerik sunmus olacak ve sitenizin kendine has özelliklerini ziyaretçiye benimsetmis olacaksınız. Sayfalarımız hızlı yüklenecektir, çünkü aynı elemanları diger sayfalarda tekrar yüklemeyecek ve bu ziyaretçiye zaman kazandıracaktır.
