CSS bilgi seviyeniz ne olursa olsun, eminin mutlaka bu sözü söylemişsinizdir, "neden çalışmıyor?"?

Programcılıkta olduğu gibi CSS'de de uymamız gereken bazı kurallar var, örneği uygulama kodlarken bir tırnak işareti veya noktalı virgül, çıldırtıcı hatalara neden olabilir.

CSSNewbie sitesinde gördüğüm Neden CSS'im çalışmıyor? yazısını, biraz yorumlayarak Türkçe'ye çeviriyorum:

Kapanmayan süslü parantezler

.renkli {
color: #ffcc00;
.koyu {
font-weight: bold;
}

Bu örnekte olduğu üzere .renkli süslü parantezle kapanmadığı için .koyu ve onun altındakiler asla çalışmayacaktır. color: #ffcc00;'dan sonra süslü parantez kapanmalıydı.

Unutulan virgül ve üzerindeki nokta

.renkli {
color: #ffcc00
background: white;


Rengi değiştirdiğimiz satırın sonundaki noktalı virgül unutulduğu için altına gelen satır işlevsiz olacaktır. color: #ffcc00'dan sonra noktalı virgül gelmeliydi.

Karakter hataları

.reknli {
color: #ffcc00;
backgroud: white;


Tanımladığımız isimi HTML'de düzgün kullanmış olabiliriz, ancak CSS tanımlaması yaparken yaptığımız bir karakter hatası sorun yaratacaktır. Aynı şekilde, CSS özelliğindeki karakter hataları da sadece o kısmın çalışmamasına neden olacaktır. .renkli ve background olmalıydı.

Yanlış CSS değerleri

.ortali {
vertical-align: center;


Alışkanlık gereği birbirine karıştırdığımız CSS değerleri düzgün yorumlanamayacaktır; vertical-align: middle olmalıydı.

Hatalar, hatalar, hatalar...

Eğer CSS kodlarınızın düzgün çalışmadığını düşünüyor ve yukarıdaki adımlara rağmen sorunun nerede olduğunu bulamadıysanız CSS Validator tam size göre. CSS kodlarınızı verin ve hata nerede size söylesin.