CSS (Stil) Dosyaları

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:

CSS 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:

CSS 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>
   </textarea></div><br>

   <div class="code1">HTML Görünümü<br> <div class="code3">
   <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>
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 ideali bunları öğrenmektir.