Ek C. CSS (Cascading Style Sheets)

<font> etiketini anlatırken, bu etiket yerine CSS kullanımının tasarımcıya kolaylık sağlayacağını söylemiştim. CSS sayesinde HTML ile kullanabildiğimiz etiketlerin özelliklerini değiştirebiliriz. Mesela hazırladığımız bir sayfada <h1> ve <h2> etiketi ile yazılacak yerlerin renginin #55558f kodu ile gösterilen renk olmasını istiyoruz. Normalde bunun için her başlık yazacağımız yere <font color="#55558f"> yazmamız gerekecekti ama CSS bizi bu zahmetten kurtarıyor. CSS kodlarımızı HTML dosyamızda kullanabilmemiz için değişik yollar vardır. Bunlardan ikisi kodları direk HTML’nin <style> etiketi içerisine yazmak diğeri ise CSS kodlarımızı ayrı bir dosyaya yazmamızdır.

<html>
<head><title>CSS Denemesi</title>
<style>
 h1 { color: #55558f }
 h2 { color: #55558f }
</style>
</head>
<body>
  <h1>Merhaba. Bu yazının rengini CSS ile ayarladım.</h1>
  <h2>Ayrıca bu yazınınki de.</h2>
</body>
</html>

Yukarıdaki örneği bir HTML dosyasına yazıp, dosyayı açarsak, aşağıda göreceğiniz gibi başlıkların rengi siyah olmayacaktır. Bunun sebebi CSS ile <h1> ve <h2> etiketlerinın özelliklerini değiştirmiş olmamızdır.

Merhaba. Bu yazının rengini CSS ile ayarladım.

Ayrıca bu yazınınki de.

Aynı örnekteki <style> etiketini

.....
<style>
 h1, h2 { color: #55558f }
</style>
....

şekilde yazmamızda sayfanın görünümünde bir değişikliğe yol açmayacaktır. Aynı sonucu elde etmek için kullanacağımız bir başka yöntem ise ayrı bir CSS dosyası hazırlamaktır. Bu yöntem önceki yönteme nazaran daha kullanışlıdır, çünkü hazırladığımız CSS dosyasını birden çok HTML dosyasında kullanma olanağı buluruz. Aşağıdaki kodları boş bir metin dosyasına yazıp ilk.css adı ile kaydedin.

h1, h2 { color: #55558f }

Daha sonra yeni HTML dosyası içine

<html>
<head>
  <title>CSS Denemesi</title>
  <link rel="stylesheet" href="ilk.css" type="text/css">
</head>
<body>
  <h1>Merhaba. Bu yazının rengini CSS ile ayarladım.</h1>
  <h2>Ayrıca bu yazınınki de.</h2>
</body>
</html>

kodlarını yazıp kaydedin. HTML dosyasını açtığınız zaman ilk CSS sayfamızın aynısı ile karşılaşırız. Burada CSS dosyamız ayrı bir dosya olduğu için sadece bir dosyada değil, sitemizdeki tüm HTML dosyalarında kullanılabilir. Tüm dosyalarımızda belli bir standardı hedef almamız sitemizde uyumlu bir görünüm oluşmasına yardımcı olacaktır. CSS dosyalarında tanımlanabilecek özellikler çok çeşitlidir. CSS1’de yaklaşık 50 çeşit özellik (color, font-size... gibi) tanımlanabilmesine karşın 1998’den itibaren kullanılan CSS2’de yaklaşık 120 özellik tanımlanabilmektedir.

CSS hakkında daha ayrıntılı bilgi için http://www.w3.org/TR/REC-CSS2 adresindeki belgeyi okumanızı hatta bu belgeyi bir başvuru kaynağı olarak makinanızda bulundurmanızı tavsiye ederim. Burada CSS’nin 2.sürümü olan CSS2 anlatılmaktadır.

Belgeler sitesinde kullanılan ve birçok web istemcisi ile uyumluluğu denenmiş kodlar içeren belgeler.css dosyasını da incelemenizi öneririm. Bu dosyada kullanılan pek çok özellikten burada bahsedilmeyecektir. Ancak bu dosyayı kitaplığın sayfalarının dosyaları ile birlikte inceleyerek neyin niçin yapıldığını anlayabilirsiniz.