Bildiğiniz üzere HTML etiketlerden oluşan bir web dili olduğu için bize şablon, stil vs. açısından pek esneklik sağlayamaz o yüzden bu durumda CSS(Cascading Style Sheets) imdadımıza yetişiyor. CSS sayfamızı renklendirmek, html etiketlerini yönetmek, tablo sıklığından kurtulup onun yerine katmanlar kullanmak, vb. gibi birçok güzellikleri vardır. Güzellikleri olduğu gibi kolaylıklarıda vardır. Örneğin, sayfada bir yazıya, etikete vs. tek tek işlemler yapmak yerine CSS kullanarak tek bir işlem yapabilirsiniz. Ayrıca CSS kullanarak iç içe aktarılmış tüm bağlantılı sayfalarda değişiklikler yapabiliriz. Örneğin, bir değişkiklik yapıcaz ve bunun için tek tek her sayfada değişiklik yapmamıza gerek yok tek bir CSS dosyası ile tüm sayfalarda değişiklikler yapabiliriz. İlerleyen derslerimizde bunlara yer vericem. Kısacası CSS bir sitenin stili diyebiliriz Son zamanlarda demeyelimde uzun süredir CSS çok tercih ediliyor. Eskiden bir site yaparken tablo veya çerçeveleri sıklıkla kullanılırdı, artık CSS o kadar yaygınlaştıki tablolar veya çerçeveler yerine katmanlar tercih ediliyor. Bunun SEO(Search Engine Optimization) içinde yararlı olduğu söylenebilir.
Not: Şunu bilmenizde fayda var CSS server tabanlı olmayıp, bir stil dili olduğu için bazı kodlar çoğu tarayıcı tarafından desteklenmez, bu desteklemeyen tarayıcıları kullanan ve sitenizi ziyaret eden kullancılar yaptığınız stilleri göremez. Her çıkan yeni CSS versiyonunu her tarayıcı desteklemeyebilir. Ancak tarayıcıların yeni sürümleri, son CSS versiyonunu desteklenebilir halde yapılıp yayınlanırsa, bu yeni sürüm tarayıcıları kullanan ve sitenizi ziyaret eden kullanıcılar yaptığınız stilleri görebilir. Benim bu konuda önerdiğim tarayıcılar Mozilla Firefox, Google Chrome‘dir. Sorunlu tarayıcı olarak Internet Explorer diyebilirim. Özellikle en sorunlu sürümü IE6 bundan sonraki sürümler IE7, IE8 çoğu şeyi destekliyor, fakat Internet Explorer çok geç geliştirildiği ve yayımlandığı için bazı eksiklikleride oluyor veya yeniliklerin eklenmesi uzun sürüyor.
CSS 3 türlü kullanılabilir…
.css uzantılı dosya oluşturulup sayfaya eklenerek.
Örnek: <link href=”stil_dosyasının_konumu” rev=”stylesheet” type=”text/css” />
Ne Yaptık: href=”konum” özelliği ile oluşturduğumuz .css uzantılı stil dosyamızı sayfamıza ekliyoruz. ve type=”text/css” ile eklediğimiz dosyanın türünü belirliyoruz.
Bir sayfaya html etiketleri aracılığı ile stil kodları eklenebilir.
Örnek
<style type=”text/css”>
#ornek_katman{
color:#000000;
font-weight:bold;
}
</style>
Ne Yaptık: ornek_katman isminde bir katman oluşturduk ve bu katmanın içeriğindeki yazıları siyah renkli ve kalın yaptık.
Veya bir html etiketinin stil özelliğini kullanarak.
Örnek: <font style=”font-size:12px;”>Yazımız Buraya</font>
Ne Yaptık: Stil özelliğini kullanarak CSS ile font etiketinin içerisindeki yazıyı 12px boyutunda yaptık.
<style type=”text/css”>
#ornek_katman{
color:#000000;
font-weight:bold;
}
</style>
Ne Yaptık: ornek_katman isminde bir katman oluşturduk ve bu katmanın içeriğindeki yazıları siyah renkli ve kalın yaptık.
Veya bir html etiketinin stil özelliğini kullanarak.
Örnek: <font style=”font-size:12px;”>Yazımız Buraya</font>
Ne Yaptık: Stil özelliğini kullanarak CSS ile font etiketinin içerisindeki yazıyı 12px boyutunda yaptık.
Peki nereden öğrenmeye nereden başlanılmalı?
CSS aslında çok kolay bir dildir ve bir css(stil) sayfası hazırlamakda bir o kadar kolaydır. En başta öğrenmemiz gereken şey katmanlardan oluştuğudur, yani <div></div> etiketleridir. Biz bu etiketlere id ve class vererek css kodlamalarımızla özelleştiririz. CSS’de id tanımlamak için kare(#), class tanımlamak için nokta(.) işaretlerini kullanır yanınada tanımlayacağımız id veya class’ın ismini yazarız sonra süslü parantez ‘{‘ ile yorum aralığını açarız CSS(stil) kodlarını yazdıktan sonrada süslü parantez ‘}’ ile yorum aralığını kapatırız.
