CSS’in tanımı ve genel bilgi

CSS (Cascading Style Sheets – Stil Sablonları), 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. içerik kısmı, HTML kodlarını içeren sayfa asıl içerigini olusturan birimleri olusturma 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. Etkilesimli sayfalar olusturmak 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 etiketini kullanırdık. Eski kodlama yöntemi ile zaman, hız ve erisebilirlik açısından büyük kayıplarımız vardı. CSS biçimlendirme kısmının yönetimini saglamak 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’in Avantajları

CSS kullanımının önemli avantajlarından bazıları:

CSS HTML’e göre birçok stil özelligine sahiptir. CSS’in sayfa içerigi ögelerinin sayfa görünümü ögelerinden ayrılması için gelistirildigini düsünürsek avantajı bastan anlasılmıs olur.

 

                                             

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 (, ), ancak  CSS’de bunu tek bir elemanla yapabiliriz ve ayrıca daha fazla stil özellikleri de atayabiliriz.(örn: kenarlık, rollover vs stillerini ekleyebiliriz.)

                                             

Kullanım KolaylıĞı :

         HTML’de her etikete artı özellikler eklemek için baska bir etiket ya da özellik eklememiz gerekmektedir. Bu islemi genis çaplı bir sitede yaptıgımızı düsünürseniz çok büyük zaman kaybı ve ugras gerektigini  göreceksiniz.

 

                                                

      Bunun gibi onlarca veya yüzlerce baslıgınız oldugunu düsünün, gerçektençok zor. CSS’de aynı islem için

                                              

      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 degil diger etiketlere de uygulayabiliriz.

 

                                                   

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.

 

Tasarım Tutarlılıgı:

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.

 

Daha az Dosya Boyutları :

CSS yardımı ile kodlanmıs HTML’in normal HTML kodlamasına göre %50 ye varan performans ve hız artısları oldugu belirlenmistir. CSS HTML’de kullanılan görünüm özelliklerini(iskeleti olusturan tablolar, bos resimler, süsleyici resimler, yazı tipleri, renkler, genislikler, yükseklikler ve Artalan resimleri) azaltacagı için dokümanlarınızın boyutunu ciddi oranda azaltacaktır.

 

                                                      CSS Editörleri

HTML yazarken ihtiyacımız oldugu gibi CSS yazarken de bir yazım aracına, editöre ihtiyacımız olacaktır. Burada sizlere basit editörlerden profesyonel editörlere bir liste sunacagız.

Metin Editörleri :

Eger ben bu is için ayrıca bir program kurmak istemiyorum. Zaten o kadar da kullanmıyorum. Ayrıca böyle hızlı oluyor diyorsanız. İste size CSS yazabileceginiz editörler.
· Windows için NotePad veya WordPad
· MacOs için TextEdit
· Linux için vi, vim veya emacs

   Ancak sunu da belirtmeliyim ki bu editörlerden fazla bir özellik ve islevsellik beklemeyin.

CSS Editörleri :

Bu editörler sadece css yazmak için üretilen programlardır. Baslangıç seviyesi için kullanıslıdır. Kod yazmanız için size kolaylık saglayan özellikleri mevcuttur. Örnegin kodlarınız renklendirme, kodlara hızlı erisim vb.
· Windows için TopStyle 
· Windows ve Mac 
· Mac OS X CSSE

HTML ve Web Programlama Editörleri :
İsin aslı birçok kullanıcı CSS yazmak için bu editörleri tercih etmektedir. Web kodlamacıları için gereken tüm araçları içermeleri, CSS kodlama da yardımcı özellikleri, kod düzeltme gibi birçok özelligi barındırmalarından dolayı çogu web kodlamacısı bu editörleri tercih etmektedir.
· Windows için Microsoft FrontPage
· Windows ve Mac OS X Macromedia Dreamweaver
· Windows için CoffeeCup HTML Editor
· Mac OS X için BBEdit 
· Son olarak Microsft’un yeni gözdesi Microsoft® Expression

 

CSS’i Web Dokümanlarına Eklemek :

CSS’i (X)HTML sayfalarımıza eklemenin 4 yöntemi vardır.

Kod içinde (In-line):
Direk olarak (X)HTML elemanın içine style özelligi kullanılarak uygulamak.

 

                                       

Tüm CSS komutlarını kodların içine direk uygulamak önerilen bir kodlama sekli degildir. Ancak özel durumlarda kullanılabilir.