Hazır stil şablonları oluşturduğumuz ve bundan yararlandığımız stil dosyaları ya da HTML belgemizin stil bölümü belge içerisinde ya da başka bir dosyaya bağlantı vererek şu şekilde kullanılır:


Belge içinde:


HTML Kodu
<style type="text/css" rel="stylesheet"> <!-- (Stiller burada belirtilir) --> </style>


Bir not defteri yardımıyla stilleri belirlediğimiz (bu dosyada HTML kodları kullanılmaz) dosyaya bağlantı vererek stilleri tanıtmak için:


HTML Kodu
<link href="stil_dosyasi.css" type="text/css" rel="stylesheet" />


Her iki yolla da stillerimizi tanıtmamız mümkün. Fakat HTML belgemizin boyutunun şişmemesi için ayrı bir dosyaya yazıp LINK komutu ile çekmek daha iyi olacaktır.


Stil Belirlemek


Stil belirlemek için formatımız " .stiladı { stiller; } " şeklindedir. Stil adından önce kullandığımız nokta ilgili tüm class tanımlamaları için geçerli olduğunu anlatır. Başına HTML kodunu alarak sadece o nesneye özel yapabilme şansımız var. Örnekleri inceleyelim:


HTML Kodu
.stilim { font: 12pt Tahoma, Verdana; color: #FF0000; } td.stilim { width: 100px; font: 10pt Tahoma, Verdana; color: #000000; }


Tüm ilgili nesneler için (mesela tüm textarea - metin kutuları için) özellik belirmek istersek bu kez nokta kullanmadan kodu küçük harfle yazar ve özellikleri belirtiriz:


HTML Kodu
body { background-color: #EFEFEF; font: 8pt Tahoma, Verdana; color: #000000; } td { font: 10pt Tahoma, Verdana; color: #FF0000; }


Dikkat edildiyse stil özelliği belirlerken " ozellik: deger; " şeklinde yazıyoruz. Nesnenin desteklediği özelliğe göre bunları kullanabiliriz. Bunlardan en önemlileri ve ne işe yaradıklarını aşağıdaki tabloda görebilirsiniz:


Arkaplan ile İlgili Özellikler


Özellik Açıklama background-color: renk; Arkaplan rengini belirleriz. background-image: url('dosya'); Arkaplan resmi belirleriz. background-repeat: tekrar; Arkaplanın tekrar edilip edilmeyeceği. Bu değer no-repeat ise tekrar yok, repeat-x ise sağa tekrarlı, repeat-y ise aşağı tekrarlı, repeat ise tekrarlı anlamlar ifade eder. background: renk url('dosya') tekrar; Yukarıdaki css kodlarını tek bir komutta kullandık.


Yazı ile İlgili Özellikler


Özellik Açıklama font: boyut, yazıtipleri; Boyut piksel olarak belirtildikten sonra yazıtipleri sıralanır ve aralara virgül konur. color: renk; Yazı rengini belirleriz. font-weight: bold; Kalın yazmak. font-style: italic; Sağa yatık yazmak. text-align: hiza; Metinleri hizalamak. left sola, right sağa, center ortalanmış, justify iki yana hizalar.


Boyut ile İlgili Özellikler


Özellik Açıklama width: deger; Genişliği belirtiriz. height: deger; Yüksekliği belirtiriz.


Kenar ile İlgili Özellikler


Özellik Açıklama border: boyut; Kenarlık boyutu piksel olarak belirtilir. Kenarlık kullanmayacaksak 0px olmalıdır. border: boyut renk durum; Boyutla birlikte kenarlık rengini ve durumu (solid = normal, dotted = çizgili) belirtilir.


Stil Kullanmaya Bir Örnek: Stil dosyamızda belirlediğimiz özellikleri DIV (HTML için bir alan) kodu kullanarak nasıl kullanabiliriz. Aşağıdaki örneği inceleyelim:


HTML Kodu
<style type="text/css" rel="stylesheet"> <!-- .ornek { font: 10pt Tahoma, Verdana, Arial; color: #0000C0; } --> </style> <div class="ornek"> Bu belirlediğimiz stille bir yazı... </div>


HTML Görünümü
Bu belirlediğimiz stille bir yazı...






Görüldüğü üzere herhangi bir koda class="stiladı" özelliği eklersek, onunla ilgili düzenlemeler gerçekleşmiş oluyor. Burada en basit anlatımıyla anlatılan CSS dosyalarının daha değişik komutları da bulunmakta, fakat başlangıç için en