HTML günümüzde web sayfaları oluşturmak için başlı başına yeterli olamıyor. Eğer sayfalarımızın işlevsel ve aynı zamanda da göze hitap etmesini istiyorsak tasarımının da kuvvetli olması gerekiyor. HTML bize çok kısıtlı imkanlar sağlıyor. Metinlerimizin renk ve boyutunu düzenleyebilir, tablo hücrelerini imkanlar dahilinde biçimlendirebiliriz ancak HTML ile daha fazla ileri gidemeyiz. Oysa CSS ile metinlerin renk, boyut, harf yüksekliği ya da harflerin birbirlerine olan uzaklıkları gibi pek çok şeyi değiştirebiliriz. Bunun yanında tabloların kısıtlamalarına maruz kalmadan Div kullanarak istediğimiz öğenin istediğimiz yerde gözükmesini sağlayabiliriz.
Bu giriş belki çoğu insanı tatmin etmeyebilir ancak ilerleyen zamanlarda örnekler verdikçe konu daha da iyi anlaşılacaktır. Eskiden sayfamızdaki bir yazıyı renklendirmek için aşağıdaki gibi bir kod yazardık
<font color='blue' size='20'><b>Bu mavi renkli ve büyük boyutlu kalın bir yazı kodudur.</b></font>
Burada color ile yazının rengini, size ile boyutunu ve b ile de yazımızın bold yani kalın olmasını sağladık.
Görüldüğü gibi CSS olomadan her yazıya bu şekilde ayrı bir işlem yapmak zorunda kalıyorduk ki bu çok zahmetli oluyordu. CSS ile başlık ya da alt başlık gibi aynı özelliklere sahip olacak metinleri ilgili stillere bağlayınca hepsi otomatik olarak aynı şekle bürünüyor. Tabi bunun sağladığı kolaylığın yanında başka bir avantajı daha var. Eğer bir gün sayfamızın tasarımında değişikliğe gitmeye karar verirsek mesela mavi olan yazıları kırmızıya çevirmek gibi işte o zaman bütün yazıların renklerini tek tek değiştirmek yerine CSS ile yapacağımız bir değişiklik hepsi için yeterli olacaktır.
Stil kodlarını istersek her sayfanın başına istersek de ornek.css gibi bir dosya oluşturarak söz konusu dosyaya yazabiliriz. Eğer her sayfanın başına yazarsak kodlar sadece o sayfayı etkiler. Örneğin sitenizde ana sayfadaki stil ile hakkımızda gibi bir sayfadaki stil birbirinden baüımsız olacaktır ve eğer dikkat etmeden oluşturulmuş bir stil varsa iki sayfanın dizaynında farklılıklar baş gösterebilir. O yüzden harici bir CSS dosyası oluşturularak her sayfanın başında link verilmesi taraftarıyım böylece dosyada yapacağınız bir değişiklikle anında bütün siteyi değiştirebilirsiniz.
Şimdi burada harici bir CSS dosyasının nasıl oluşturulduğunu göstermeyeceğim (ama merak etmeyin sonraki derslerimizde bunu yapacağım) çünkü şu anlık genel bahsediyorum. Ancak elimizde hazır bir CSS dosyası varsa eğer onu sayfamıza nasıl bağlayacağınızı göstereceğim
Şimdi diyelimki bir index.html dosyamız var. Dosyamızla aynı konumda bulunan bir de ornek.css dosyası. O zaman ornek.css dosyasını index.html sayfasına bağlama için sayfamızın <head> </head> bölümüne aşağıdaki kodu yazmamız yeterli
<link rel="stylesheet" href="ornek.css">
Eğer ornek.css dosyası index.html ile aynı konumda değilde dizayn gibi bir ada sahip bir klasörün içindeyse yazmamız gereken kod aşağıdaki gibidir.
<link rel="stylesheet" href="dizayn/ornek.css">
sayfamıza sadece bir tane değil istediğimiz kadar harici css dosyası bağlayabiliriz ancak dikkat edin stil adları birbirine karışmasın yoksa başınız çok ağrır. Aşağıdaki örnekte iki css dosyası bir sayfaya bağlanıyor.
<link rel="stylesheet" href="ornek.css"> <link rel="stylesheet" href="ornek2.css">
Evet yukarıda bir css dosyasının sayfaya nasıl bağlandığını gördük. Bu işlemi yapmak için bir başka yöntemimiz daha var. Üstelik bu yöntemle hem bir css dosyasını bir sayfaya bağlayabildiğimiz gibi hem de bir css dosyasını başka bir css dosyasına da bağlayabiliriz.
@import url(ornek.css);
link komutunun başındaki ve sonundaki < ve > işaretleri ile import komutunun sonundaki noktalı virgüle dikkat edin eğer unutursanız kodunuz çalışmayacaktır
Bir sonraki derste görüşmek üzere.