CSS nasıl oluşturulur

Stil tablosunu nasıl eklerim

Bir stil tablosunu okuduğunda, tarayıcı ona göre HTML belgesini biçimlendirecektir. Stil tablosunu eklemek için üç yöntem vardır:

Dış stil tablosu

Stilin birçok sayfaya uygulanması gerektiğinde, dış stil tablosu mükemmel bir seçim olacaktır. Dış stil tablosu kullanırken, bir dosyayı değiştirerek tüm sitenin görünümünü değiştirebilirsiniz. Her sayfa, başlıkta <link> etiketi ile stil tablosuna bağlanır.<link> etiketi başlıkta yer alır (belgenin):

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

Tarayıcı, mystyle.css dosyasından stil açıklamalarını okuyacak ve ona göre belgeyi biçimlendirecektir.

Dış stil tablosu herhangi bir metin düzenleyicisinde düzenlenebilir. Dosya html etiketlerini içermemelidir. Stil tablosu .css uzantısı ile kaydedilmelidir. Bir stil tablosu dosyası örneği şöyledir:

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

Öznitelik değerleriyle birimler arasında boşluk bırakmayın. "margin-left: 20 px" yerine "margin-left: 20px" kullanırsanız, sadece IE 6'da geçerli olacaktır, ancak Mozilla/Firefox veya Netscape'de düzgün çalışmayacaktır.

İç stil tablosu

Tek bir belge özel stillere ihtiyaç duyduğunda, iç stil tablosu kullanılmalıdır. İç stil tablosunu tanımlamak için belge başlığı içinde <style> etiketini kullanabilirsiniz, örneğin:

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

İç stil

Görünüm ve içerik karıştırıldığında, iç stilin tarz tablosunun birçok avantajını kaybetmesi nedeniyle. Bu yöntemi dikkatli kullanın, örneğin, stilin sadece bir elemene bir kez uygulanması gerektiğinde.

İç stil kullanmak için, ilgili etiket içinde stil (style) özelliğini kullanmanız gerekmektedir. Style özelliği herhangi bir CSS özelliğini içerebilir. Bu örnekte, paragrafın rengini ve sol dış kenarı nasıl değiştireceğinizi gösteriyoruz:

<p> style="color: sienna; margin-left: 20px">
Bu bir paragraftır
</p>

Çoklu Stil

Aynı seçici farklı stil tablolarında aynı özellikler için tanımlandığında, özellik değerleri daha spesifik stil tablosundan devralınır.

Örneğin, dış tarayıcı stil tablosu h3 seçicisi için üç özellik içerir:

h3 {
  color: kırmızı;
  text-align: sol;
  font-size: 8pt;
  }

İç tarayıcı stil tablosu h3 seçicisi için iki özellik içerir:

h3 {
  text-align: sağ; 
  font-size: 20pt;
  }

Bu sayfa aynı zamanda dış tarayıcı stil tablosu ile de bağlantılıysa ve h3'ye yönelik bu stil alınırsa:

color: kırmızı; 
text-align: sağ; 
font-size: 20pt;

Renk özelliği dış tarayıcı stil tablosundan devralınırken, metin dizayni (text-alignment) ve yazı boyutu (font-size) iç tarayıcı stil tablosundaki kurallar tarafından değiştirilir.