HTML dokümanlar içerisinde sınıf (class) olarak tanımladığımız birimler vardır. İşte bu sınıf birimlerinin özelliklerini CSS ile ayarlayabiliriz. Diyelim ki html tabanlı bir sayfada aşağıdaki kod yer alıyor:
<p align=”center” class=”paragraf”>Yazı...</p>
Sınıfı “paragraf” olan imleri CSS içerisinde şöyle tanımlayabiliriz:
.paragraf {color: black; font: Arial;}
Böylece “paragraf” sınıfıyla tanımlanan birimlerde yazı rengi siyah ve yazı tipi Arial olacaktır.
“Paragraf” sınıfını birimlere göre farklı ayarlamak için aşağıdakine benzer seçiciler kullanabiliriz:
p.paragraf {color: black; font: Arial;}
h1.paragraf {color: red; font: Arial;}
Böylece <p> biriminin kullanıldığı tüm alanlarda sınıf “paragraf” olarak belirlendiğinde yazı rengi siyah; <h1> biriminin kullanıldığı alanlarda sınıf “paragraf” olarak belirlendiğinde yazı rengi kırmızı olacaktır.
Ayrıca sınıf seçicileri yerine ID seçicileri de kullanabiliriz. ID seçici ile sınıf seçicileri arasındaki önemli bir fark, CSS içerisinde ID’lerin # işareti ile belirtilmesidir.
<p align=”right” ID="baslik2">Merhaba Dünya!</p>
<h1 ID="baslik2">Merhaba Dünya!</h1>
Böylece “baslik2” buyruğunu CSS içerisinde şu şekilde tanımlayabiliriz:
#baslik2 {color: blue;}
Böylece “baslik2” ID’sini kullandığımız birimlerde yazı rengi mavi olacaktır. Bu özellikleri arttırabilirsiniz.
CSS’de tüm komutlar belirli bir düzene göre sıralanır. Genel olarak iki bölüme ayrılır. Birincisi en solda bulunan kuralı uygulayacağımız elementtir. Buna seçici (selector) denir.
CSS’nin temel yapısında bir diğer özellik de bildirim bloğu (declaration)’dur. Bildirim bloğu süslü bir parantez ile açılır; benzer şekilde noktalı virgülün ardından süslü parantez ile kapanır.
Bildirim bloğunda “seçici” için istediğimiz kadar “özellik” ve “değer” atayabiliriz. Birkaç örnek vermek gerekirse;
Tek bir özellik:
H1 {font-family: Arial}
Birden fazla özellik:
H1 {font-family: Arial; font-size: 2; font-weight: bold; color: red;}
Yukarıdaki CSS kod dizilimini açıklayalım;
H1, seçici özelliktir; genellikle yazı/paragraf başlıklarını tanımlamak için kullanılan bir tür HTML kodudur. H1 kodunu kullandığımız satırlarda yer alan yazılar bildirim bloğunda bulunan özelliklere göre şekillenecektir.
Seçicinin ardından süslü parantez açıyoruz. Özellik ve değerler arasında iki nokta üst üste [:] işareti yer alır. Her bir değerin sonuna noktalı virgül [;] gelmelidir.
Seçici için tanımlayacağımız yazı tipi, yazı boyutu, kalınlık/italic ve renk gibi özellikleri her bir satırda belirtiyoruz. Ardından bildirim bloğunu süslü parantez ile kapatıyoruz.
Bu satırda kullandığımız özellikler:
font-family (yazı tipi)
font-size (yazı boyutu)
font-weight (kalın, italic, altı çizili yazı)
color (yazı rengi)
CSS kod diziliminde her bir özelliği aynı satıra yerleştirmek zorunluluğu yoktur. Yukarıda verdiğimiz örnekte yer alan özellikleri aşağıdaki gibi birden fazla satıra yayabiliriz:
H1 {
font-family: Arial;
font-size: 2;
font-weight: bold;
color: red;
}
Dış Stil Sayfası (External Style Sheets)
Birden fazla sayfada tek tip stil kullamak için “style” dosyası oluşturmamız gerekir. Oluşturacağımız stil dosyasının uzantısı .css şeklinde olmalıdır.
Bunu yaptıktan sonra HTML sayfalarda “style” dosyasını çağırmamız gerekir. Her sayfanın header bloğuna ekleyeceğimiz kısa satırla bunu sağlarız:
<link rel="stylesheet" type="text/css" href="stil.css" />
Bu örnekte “style” dosyasının ismi “stil.css” dir. Bu dosyanın ana dizinde olması gerekir. Başka bir dizinde bulunuyorsa bunu “dizin/stil.css” şeklinde ilgili klasörün ismini vererek belirtmemiz gerekir.
Bu tür “style” dosyalarına “dış stil sayfası” diyebiliriz. Tüm sayfalarda tek tip stil kullanmak için bunu tercih edebiliriz.
İç Stil Satırları (Internal Style Sheets)
Ayrıca “dış stil sayfası” kullanmak yerine stilimizin tamamını ilgili sayfada header bloğuna ekleyeceğimiz “iç stil satırları” ile sağlayabiliriz:
<style type="text/css">
P {color: black; font: verdana}
H1 {color: red; font: verdana}
</style>
“İç stil satırları” bazı eski tarayıcılar tarafından desteklenmeyebilir. Zaten günümüzde Firefox 2 ve Internet Explorer 6/7 gibi yeni kuşak tarayıcılar tercih edilir. Yine de eski tarayıcılarda bunu önlemek için yukarıdaki kodun başına <!– imlecini; sonuna ise –> imlecini yerleştirerek CSS komutunu aşağıdaki gibi kapatmamız gerekir:
<style type="text/css"> <!--
P {color: black; font: verdana} /* Satır Yorumu */
H1 {color: red; font: verdana} /* Satır Yorumu */
--> </style>
Ayrıca her bir satırda C dilindeki yapıya benzer şekilde /* */ iki işaret arasında ilgili satırlar hakkında yorum ekleyebilirsiniz.
Her bir sayfada farklı stil kullanmak için bu yöntemi tercih edebiliriz.
İlk olarak 1995′de ortaya çıkan CSS, 1996 yılında W3C (Dünya Çapında Ağ Birliği)’ne kabul edildi. W3C’ye katılması demek bu kodlama biçiminin tüm tarayıcılar tarafından destekleneceği anlamına geliyordu. Bu tarihten itibaren W3C’ye üye olan tüm tarayıcı grupları CSS’nin yeni versiyonlar tarafından desteklenmesini kabul etmiştir. Nitekim Mayıs 1998′de gerekli güncellemeler yapılarak CSS 2′ye geçiş yapılmıştır. Ardından CSS 2.1 ile bazı özellikler yenilenmiştir.
Gelelim CSS’nin ne işe yaradığına… Web sayfalarının iki önemli öğesi sayfalarda yayınlanan bilgi ile stilin birbirine uyarlanmasıdır. Bu nedenle HTML ve CSS’nin birbiriyle uyumlu olarak çalışması ve sayfa stillerinin birkaç değişiklikle güncellenebilmesi bize kolaylık sağlayacaktır. Terim olarak CSS’nin İngilizce’deki açılımı “Cascading Style Sheets” dir. Adından da anlaşıldığı gibi içerisinde geçen “style” kelimesi sayfada yer alan bilgilerin belirli bir stil (tarz) ile sunulması olayıdır.
Kısaca CSS, HTML sayfaların stil olarak düzenlenmesinde bize kolaylık sağlar. Mesela web sitenizde yer alan tüm sayfalarda yazı tipini “verdana”, yazı tipi boyutunu da “10 punto” olarak ayarlamak istiyorsunuz. Bunu “style” dosyasında tek bir satırla halledebilirsiniz. CSS kullanmıyorsanız bu değişikliği bütün sayfalarda yapmak zorunda kalırsınız. İşte bu noktada CSS’nin çok önemli faydası vardır.
CSS’nin temel özellikleri nelerdir?
Style dosyasında yapacağınız birkaç değişiklikle web sitenizde yer alan tüm sayfaların yazı tipini, boyutunu, rengini, arka planını vb kolayca değiştirebilirsiniz.
CSS, temel olarak kullanımı kolay bir dile sahiptir. HTML’yi bilen herkes CSS’den istifade edebilir. Ayrıca HTML’de kullandığımız etiketlerin başında ve sonunda yer alan < - > gibi işaretleri kullanmamıza gerek yoktur. Bu nedenle yazımı gayet basit ve sadedir.
Diğer bir özellik de yazı tipi gibi özelliklerin “style” dosyası ile ayarlanmasıyla belirli HTML kodların diğer sayfalarda kullanılmasına gerek kalmamasıdır. Böylece sayfaların boyutundan tasarruf edebiliriz.
CSS’yi nasıl öğrenebilirim?
CSS’yi öğrenmek hiç de zor değil. Ancak CSS’ye başlarken bir parça HTML bilginizin olması gerekir. Çünkü CSS, HTML’nin kullanımını kolaylaştıran bir tür web yazılımıdır.
Şindilik bu kadar…
Bu yazımda CSS’nin temel özelliklerine kısa bir giriş yaptık. Bir sonraki yazımda CSS’nin HTML sayfalara uyarlanmasını işleyeceğiz. 
Category Archives: 
