CSS Nedir?

Geçtiğimiz iki sayıda HTML'den bahsetmiştik. Web sayfaları hazırlamak için kullanılan (X)HTML, bazı durumlarda yetersiz kalmaktadır. Bunun için geliştirilen CSS (Cascading Style Sheets - Yığmalı Stil Sayfaları) HTML'le beraber kullanılarak biçimlendirme konusunda eksik kaldığı yönleri tamamlar. Bu yazımızda CSS'in ayrıntılarına değineceğiz.

CSS Neden Gereklidir?

  1. HTML'in aksine, sayfayı şekillendirmede yapısal bir kontrol olanağı sağlar. Sayfadaki belli özellikteki tüm nesnelerin şeklini sistematik şekilde düzenleyebilirsiniz. Örneğin, tüm tabloların arkaplan rengini, tüm başlıkların fontunu CSS ile belirleyebilirsiniz.
  2. Sayfanın biçimlendirmesi ile içeriğini düzgün bir biçimde ayırt etmenizi sağlar. Böylece kodunuzda satır aralarında içeriğe şekil vermek için kullandığınız onlarca biçimlendirme etiketinden kurtulursunuz.
  3. Bir sayfanın stille ilgili tüm bilgilerini bir kerede tanımlayarak tekrar eden etiketlerden kurtulur, dosya boyutlarını azaltırsınız. Böylece kullanıcıların sayfanızı daha hızlı yüklemesini sağlarsınız.
  4. Sitenizin şablonunu tek CSS dosyasında tutarak, yapacağınız görsel değişiklerde sadece CSS dosyasının içeriğine müdahale ederek tüm sitenizin görünümünü baştan aşağı kolayca değiştirebilirsiniz. Bir sayfanın görünümünün sadece CSS dosyasını değiştirerek nasıl etkilenebileceğini görmek için CSS Zen Garden sitesinde sağdaki temaları deneyebilirsiniz.
  5. Standartlara uygun, daha kaliteli web sayfaları yapabiliriniz.

Sayfa İçinde Nasıl Kullanılır?

Sayfalarınıza CSS ile stil verirken kullanabileceğiniz 3 temel kodlama şekli vardır:

  1. Yerel Stil Tanımlama: Sayfanızda kullandığınız etiketlerle ilgili biçimlendirme yaparken -sadece o etiketin- şeklini değiştirmek istiyorsanız, bu işlemi ilgili etiketin "style" özelliğini kullanarak yaparsınız. Örneğin, bir paragrafa kırmızı renk vermek için şöyle bir yöntem kullanabilirsiniz: <p style="color: red;">kırmızı</p>

  2. Genel Stil Tanımlama: Biçimsel bir değişikliği sayfanızdaki tüm öğelere uygulamak istiyorsanız "head" etiketi içinde sayfanızın stil bilgilerini yazabilirsiniz. Örneğin, sayfanızdaki tüm paragrafların kırmızı renkte olmasını istiyorsanız aşağıdaki kısmı sayfanızın "head" etiketi içine eklemelisiniz:

    <style>
p{ color: red; }
</style>

  3. Stil Dosyası Ekleme: Sitenizde birden çok sayfada aynı biçimlendirmeyi kullanacaksanız, her sayfaya aynı CSS dosyasını ekleyebilirsiniz. Bunu yapmak için aşağıdaki satırı sayfanızın "head" kısmına ekleyebilirsiniz. "href" özelliğinin değerini değiştirerek, stil dosyanızın adını verebilirsiniz: <link rel="stylesheet" href="stil.css" type="text/css" />

CSS'in Yapısı

CSS kodları, temel olarak üç kısımdan oluşur. Sayfa içinde hangi etiketleri değiştireceğinizi gösteren "seçiciler", bunların içinde değiştirmeyi istediğiniz "özellikler" ve bu özelliklere vermek istediğiniz "değerler". Her seçiciden sonra küme parantezi açılır ve bu küme parantezi kapatılana kadar, özellik-değer çiftleri, aralarında ":", sonlarında ";" olacak şekilde ifade edilir. Küme parantezlerini kapamadan önce noktalı virgül kullanılmayabilir. Beyaz (white space) karakterlerin önemi yoktur. Yani boşluk, tab ve satır başı karakterleri dikkate alınmaz. /* */ işaretleri arasına yorum ve açıklamalar yazılabilir. Bunlar, tarayıcı tarafından dikkate alınmaz. Buna göre örnek CSS yapısı şöyledir:

secici1
{
    ozellik11: deger11;
    ozellik12: deger12;
}
/* Yorum
    Satırları */
secici2, secici3
{
    ozellik21: deger21;
    ozellik22: deger22;
    ozellik23: deger23
}

Seçiciler

Hangi etiketleri biçimlendirmek istediğiniz seçiciler çeşitli formlarda ifade edilebilir. Yukardaki örnekteki gibi aynı özellikleri vermek istediğiniz birden fazla seçici, aralarına virgül koyarak yazılabilir. Aşağıda CSS'teki seçici türleri gösterilmiştir:

  1. Etiket: Stilin sadece belirli etiketlere uygulanması için kullanılır. Örneğin; body {background-color:purple;} body etiketinin arkaplan rengini mor yapar.
  2. Sınıf: Stilin sadece belirli bir sınıfa ait etiketlere uygulanması için kullanılır. Örneğin; h1.patates {font-family:Verdana;} sadece sınıfı patates olan h1'lerin fontunu Verdana yapar.
  3. Id: Stilin sadece belirli bir id'deki etikete uygulanması için kullanılır. Örneğin; img#patates {border:2px;} sadece id'si patates olan resimlerin etrafına 2px kalınlığında border çeker.

  4. Genel: Bu seçici *(yıldız)dır ve bütün etiketlerin yerini tutar. Örneğin;

    *.patates {color:yellow;}
.patlican {color:yellow;}

    sınıfı patates olan bütün etiketlerin yazı rengini sarı yapacaktır. Bu işaretin kullanılması isteğe bağlıdır. Yani ikinci örnek de ilk örnekteki gibi tüm etiketlere etki eder ve sınıfı patlican olan tüm etiketlerin yazı rengini sarı yapar.

  5. Alt etiket: Bir stili, belirli bir etiketin içindeki başka bir etikete uygulamak için kullanılır. Örneğin; div.patates h1 {font-size:20;} sınıfı patates olan div'in altındaki h1'lerin font büyüklüğünü 20 yapar.

  6. Ardışık etiket: Stilin sadece belirli bir etiketin arkasından gelen başka bir etikete uygulanması için kullanılır. Örneğin; h1 + p {color:yellow;} sadece h1 etiketinin arkasından gelen paragraflardaki yazı renginin sarı olmasını sağlayacaktır.

  7. Özellik: Sadece belirli bir özelliği taşıyan etiketlere stil uygulamak için kullanılır. Örneğin; a[href="http://e-bergi.com"] { color:red; } sadece adresi "http://e-bergi.com" olan linklerin rengini kırmızı yapacaktır.

  8. Sözde sınıflar (pseudo-class): Belli bir niteliğe sahip etiketleri seçmek için kullanılır. Bazı çok kullanılan pseudo-class'lar ve yorum halindeki açıklamaları aşağıdadır:

    a:link { color: "#0000ff" }      /* Standart linkler */
a:visited { color: "#ff00ff" }       /* Ziyaret edilmiş linkler */
a:active { color: "#ff0000" }        /* Aktif linkler */
a:hover { color: "#00ff00" }     /* Fare ile üzerine gelinen nesneler */
li:first-child { font-size: 20px }   /* Bir etiketin, üst etiket içindeki ilk örneği */
p:first-line { font-weight: bold }   /* Bir paragrafın ilk satırı */
p:first-letter { font-weight: bold } /* Bir paragrafın ilk harfi */

Metin Özellikleri

Bu yazımızda CSS'in tüm özelliklerine değinmeden, sadece metin biçimlendirme özelliklerini kullanarak pratik yapalım. Sonraki yazımızda, CSS'in ayrıntılarını inceleyebiliriz. CSS'te metin biçimlendirme için aşağıdaki özellikleri kullanabiliriz:

  • color: Metnin rengini belirler. "black", "red" gibi değerler alabileceği gibi "#1a2f48" şeklinde HTML renk kodu da girebilirsiniz.
  • line-height: Satır yüksekliğini belirler. Uzunlukları belirtmek için CSS'te "5px" ya da "1em" gibi değerler girilebilir. Burda "px", piksel (nokta genişliğini), "em" font büyüklüğünü ifade eder. Standart değere oranı belirtmek için "120%" şeklinde yüzde ifadeleri de kullanılabilir.
  • letter-spacing: Harfler arasındaki uzaklığı belirler. Yukardaki gibi uzunluk değerleri yazılabilir.
  • text-align: Metnin hizalamasını belirler. "left" (sol), "right" (sağ), "center" (ortala), "justify" (hizala) değerlerini alabilir.
  • text-indent: Metnin ilk satırının ne kadar içeride olacağını belirler.
  • direction: Metnin yazılış yönünü belirler. "ltr" (soldan sağa) ve "rtl" (sağdan sola) değerlerini alabilir.
  • word-spacing: Kelimeler arasındaki uzaklığı ayarlar.

Metin biçimlendirmeyle ilgili özelliklerin etkilerini görmek için metin özellikleri sayfasına bakabilirsiniz. Dosya açıkken sağ tıklayıp "sayfa kaynağını göster" diyerek kodunu inceleyebileceğinizi unutmayın. Yazı dizimize önümüzdeki ay arkaplan, font, çerçeve gibi çeşitli konulardaki özelliklere değinerek devam edeceğiz...

Kaynaklar: