CSS yazmanın belli başlı kuralları vardır fakat bunlar öğrenilmesi zor kurallar değil. Bir yerden başlayalım.

Temeller

Öncelikle bir class tanımlıyoruz. Bu sınıfları daha sonra html içinde kullanacağız. Bizim tanımladığımız sınıf(class)ın adı yazi olsun. Tanımlamalarımızda Türkçe karakterler kullanmıyoruz. Tanımladığımız yazi sınıfının başına bir nokta koyuyoruz ve sonuna da süslü parantez açıp kapatıyoruz. Yazmak istediğimiz kodları da bu süslü parantezlerin içine yazıyoruz. Parantezlerin içine yazdığımız kodları da noktalı virgüllerle ayırıyoruz. Daha doğrusu noktalı virgül ile o kodu kapatıyoruz. Hiçbir şey anlamadıysanız sorun değil, hemen bir örnekle açıklayayım.

.yazi {
font-size: 11px;
font-family: Tahoma;
}

yazi sınıfımız hazır. Peki bunu nasıl kullanacağız?

Hazırladığımız sınıfları kullanabilmek çok basit. HTML tagimizin içine class=”yazi” yazacağız. Hemen bir örnekle açıklayayım.

<div class="yazi">İçeriğimiz burada.</div>

Bu örnekte div etiketi içine yazdığınız yazılar, az önce tanımladığımız yazi sınıfındaki gibi 11px boyutunda ve Tahoma yazı tipiyle yazılacak. Aslında bu şu demek:

<div style="font-size: 11px; font-family: Tahoma;"></div>

Dilerseniz böyle de kullanabilirsiniz. Fakat böyle kullandığınızda, kodları düzeltmeniz gerektiğinde bütün sayfaları tek tek düzenlemeniz gerekir. Sınıflarla çalıştığınızda css dosyanızdan kodu düzenleyip kaydedersiniz bütün sayfalara etki eder.

Burada CSS’in nasıl yazıldığını ve kullanıldığını gördük. CSS’in temelleri bundan ibaret. Şimdi biraz ileri aşamalara geçelim.

HTML etiketlerini biçimlendirmek

Başlık biraz ürkütücü gelmiş olabilir. “div, p, span, table” gibi html etiketlerini nasıl biçimlendireceğimizi göreceğiz.

Sınıflarımızı tanımlarken kullandığımız noktayı kullanmayarak bunu rahatlıkla yapabiliriz. Şöyle ki:

div {
text-align: left;
text-decoration: underline;
}

Eğer stil dosyanıza böyle bir kod yazarsanız, sayfanızdaki bütün div elemanları bu stilde yazılan şekilde olur. Yani yazılar sola hizalanmış ve yazıların altı çizilmiş olur. “div” yerine “table, p, span” gibi html etiketlerini de yazabilirsiniz.

ID (aydi) ‘ler ile çalışmak

ID’ler bizim css dosyalarımızı düzene sokan elemanlardır. ID’leri şu şekilde belirleyebiliriz:

<div id="icerik"></div>
<span id="bolum"></span>
<table id="anatablo"></table>

ID’mizi belirledik. Şimdi bunun kullanımını görelim. Bu örnek için “icerik” ID’mizi ele alalım.

#icerik {
border: 1px solid #ccc;
}

CSS’te ID’leri kullanmak için ID’mizin başına # koyuyoruz ve normal bir şekilde kodlarımızı yazıyoruz. Üstteki örnekte “icerik” ID’li elemanın çerçevesinin rengini #ccc yaptık.

Eğer ID’nin içindeki herhangi bir html etiketini biçimlendirmek istiyorsak şöyle bir yöntem kullanırız:

#icerik span { color: #000; }

Üstteki örnekte icerik ID’li elemanımızın içindeki span etiketlerinin içerisine yazılmış yazıların rengini siyah yaptık.

ID’mizin içindeki sınıfları biçimlendirirken de şöyle bir yöntem izleriz:

#icerik .sinif { font-family: 'Trebuchet MS' }

Üstteki örnekte icerik ID’li elemanımızın içerisinde sınıfı sinif olarak belirlenmiş elemanın yazı tipini Trebuchet MS yaptık.

icerik ID’li elemanın içerisinde sınıfı sinif olarak belirlenmiş elemanın içerisindeki bir html etiketini biçimlendirirken de şöyle yaparız:

#icerik .sinif div { font-size: 11px; }

Öğrendiklerimizi özetlersek:

1. ID kullanırken tanımladığımız kelimenin başına # koyarız.
2. Sınıf kullanırken tanımladığımız kelimenin başına . koyarız.
3. HTML etiketlerini biçimlendirirken sadece etiketin adını yazarız.

Bundan sonraki derslerde css kodlarının detaylarına ineceğim.

Güncelleme 03.09.09

Bir HTML etiketine class atadıktan sonra CSS’te şöyle yazarak da yapmak istediğimiz şeyi yapabiliriz:

HTML kodumuz şu olsun:

<div class="turgut">css</div>

CSS kodumuz:

div.turgut { font-size: 11px; }
div.turgut:hover { font-size: 14px; }