Bu makalemde; bugün karşılaştığım bir soru üzerine çoğu kişi tarafından bilinmeyen Stil Şanlonu kullanımı konusunda bilgiler aktaracağım.

Cascading Style Sheets (Türkçede Stil şablonları) yani bilinen kısa adıyla CSS, HTML’e ek olarak metin ve format biçimlendirme alanında fazladan olanaklar sunan bir web teknolojisidir.

Oluşturduğumuz bir sayfayı biçimlendirmek için iki farklı metot bulunmaktadır.

  • Etiket içinde belirleme
  • Etikete ID ya da Class ismi vererek

İlk yöntem daha çok basit sayfalar için tercih edilmelidir.

Etiket İçinde Tanımlama

<div style="background:#FF0000;"></div>

ID ya da Class Tanımlama

<div id="div"></div>

ya da

<div class="div"></div>

Daha çok karmaşık ve çok etiket bulunan sayfalar için bu yöntem tercih edilmesi daha doğru olacaktır.

Burada şu soru sorulabilir. Peki bu ikisinin arasındaki fark nedir? Aslında CSS tarafından ikisini bir farkı yoktur. Her iki şekilde de kodlar çalışacaktır. Ancak sayfanızda DOM (Document Object Model) kullanacaksanız ID’yi temel alıp Class’ı yardımcı olarak kullanabilirsiniz. Çünkü DOM’un bir etikette tanıdığı nitelik ID’dir. Bu konuda daha fazla açıklama yapmadan devam ediyorum.

Style Etiketi Kullanımı

<style>
div {
  background: #FF0000;
}
</style>

Eğer sayfamızın stilini bir <style> etiketi ile belirleyecek isek; etiketi, <head></head> etiketleri arasına eklememiz gerekiyor.

Stil Şablonu Kullanımı

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

Eğer sayfamızın stilini bir stil şablonu vasıtasıyla düzenleyecek isek bunu sayfamızın <head></head> etiketleri arasında yukarıdaki gibi belirtmemiz gerekiyor.

Şimdi gelelim bu stil değerlerini nasıl gireceğimize. Bunun için başlıca üç değişik yöntem bulunmaktadır.

Etiket Stili

<div></div>
div {
  background: #FF0000;
}

Bu kullanım ile sayfamızda bulunan tüm <div>> etiketlerinin arka plan renkleri kırmızı olacaktır.

Class Tanımlanmış Etiket Stili

<div class="div"></div>
.div {
  background: #0000FF;
}

Bu şekilde ise class niteliği div olan tüm <div> etiketlerinin arka plan renkleri kırmızı olacaktır.

ID Tanımlanmış Etiket Stili

<div id="div"></div>
#div {
  background: #00FF00;
}

Ve bu şekilde ise id niteliği div olan tüm <div> etiketlerinin arka plan renkleri kırmızı olacaktır.

Bu konuda daha detaylı bilgiler verilebilirdi. Ancak başlıkta da ifade ettiğim gibi bu konuda temel bilgileri verdim. Bilmeyenler ve ilk başlayanlar için ideal bir rehber olacağını düşünüyorum.