CSS Nedir, “Cascading” Ne Anlama Gelir?

Yazımıza ilk olarak “CSS nedir?” sorusuyla başlayalım. CSS, “Cascading Style Sheets” kelimelerinin baş harflerinden yola çıkılarak adlandırılmıştır. Türkçeye ise “Basamaklı Stil Şablonları” veya “Basamaklı Biçim Sayfaları” şeklinde çevrilmiştir.

CSS

“Python“, “Java“, “C++” tarzında bir programla dili olmayan CSS, tıpkı HTML gibi bir işaretleme dilidir. HTML’den farklı olarak, bir web sayfasının stilini, tasarımını ve genel görünümünü kontrol etmek için kullanılır.

Başlarda, sayfadaki tüm biçimlendirme işlemleri HTML üzerinden etiket ve öznitelikler vasıtasıyla yapılabilmekteydi, ayrıca tekrar eden stil tanımlamaları nedeniyle verimsiz bir süreç oluşmaktaydı. Hele web sitesinin genel stilini değiştirmek demek tam bir kaostu, her sayfayı tek tek güncellemeniz gerekiyordu. Zaten web sayfalarının giderek karmaşık hale gelmesiyle işler iyice çığırından çıkmıştı.

Bu sorunları çözmek amacıyla, 1994 yılında Håkon Wium Lie adında Norveçli bir abimiz, tabiri caizse; “içerik ayrı bir yerde (HTML), stillemeler ayrı bir yerde (CSS) olsun” diyerek bugün yeni bir stil tanımlama dili önerdi.

CSS’in amacı, stil bilgilerini HTML yapısından ayrı tutarak, web tasarımcılarına daha fazla kontrol ve esneklik sağlamaktı. Bu sayede, sitenin genel görünümü tek bir yerden yönetilebilir olmuştur. Norveçli abimiz sayesinde bugün, web sayfalarının stilini belirlemek hem daha kolay hem de daha verimli bir işlem haline gelmiştir.

İyi güzel hoş, CSS nedir sorusunu anladık da, peki nedir bu “cascading”? sorusuna cevap verelim. Kaç defa öğrendim sandım, her yere baktım hep birbirini tekrar eden papağan cümleleri buldum. Bu durum çok canımı sıksa da günün birinde kendimce bir aydınlanma yaşayarak biraz olsun mekanizmayı anladım diyebilirim.

“Cascading” Nedir?

Kelimenin Türkçe çevirilerine baktığımda kafamda bir ışık yanar dedim ama bir de ne göreyim! Kelime baya baya “art arda takma, basamaklama, peşpeşeleme” gibi anlamlara geldiğinden hiçbir şey anlamamıştır. “Peki, biz bundan ne anlamalıyız?”

Aslında “Cascading” terimi, CSS’te stil tanımlamalarının nasıl uygulandığını ifade eden sistemin adına deniyor. Olayı bir örnek üzerinden anlatarak başlayayım:

li {
  color: red;
  color: yellow;
}

Yukarıdaki CSS stilimizde, liste (li) elementimiz için color özelliği iki kere uygulanmıştır. Ancak, iki aynı özellikten ikisi de aynı anda uygulanamayacağına göre bir tanesinin seçilmesi gerekmektedir. İşte bu bir tanesinin seçilme işlemine “cascading” deniliyor. Yani örneğimizde stilleme “cascading” sayesinde li etiketlerinin metin rengi olarak sonradan yazılan yellow (sarı) rengi uygulanacaktır.

“Cascading”, yani basamak dediğimiz şey aslında stilleme yapmak. Yukarıdaki örneğimizde, stillerimizi içine yazdığımız süslü parantezlerin { } her biri bir basamağı temsil etmekte. Aşağıdaki örnekte ise 3 tane basamak yazdık:

li {
  color: red;
}
h1 {
  bacground-color: yellow;
}
h2 {
  font-size: 16px;
}

O halde “cascading” denilen arkadaşın ne olduğunu öğrendiğimize göre sıra geldi hangi durumlarda kullanıldığını incelemeye.

CSS’te, “cascading” prensibinin uygulanması, stil kurallarının çeşitli kaynaklardan gelmesi ve çakışan kuralların nasıl çözüleceğini belirlemek için kullanılır. Bu prensip, aşağıdaki faktörleri dikkate alır:

• Konum
• Özgüllük
• Tip
• !important

Konumun Basamağa Etkisi

CSS, belgedeki stil kurallarını yukarıdan aşağıya doğru bir şekilde okur ve çakışan kurallarda son tanımlananı uygular. Eğer çakışma varsa, sonra tanımlanan önce tanımlananı ezer:

li {
  color: red;    /* İlk tanımlanan özellik */
  color: yellow; /* Son tanımlanan özellik */
}
h1 { /* İlk tanımlanan element */
  font-size: 16px;
}
h1 { /* Son tanımlanan element */
  font-size: 16px;
}

Özgüllüğün Basamağa Etkisi

Özgüllük (specificity), CSS’te çakışan kurallar arasında hangisinin uygulanacağını belirler. Özgüllük seviyesi yüksek olan kural, daha düşük seviyedeki kuralları geçersiz kılar. Daha detaylı anlatım için ilgili konuyu çalışınız. Örneğin, HTML dökümanına <p id="myId" class="myClass">Merhaba Dünya!</p> şeklinde bir şey yazalım ve stillemeyi aşağıdaki gibi yapalım:

#myId {
  color: blue;
}
.myClass {
  color: green;
}
p {
  color: red;
}

Bu durumda, metin mavi (blue) renkte olacaktır çünkü ID seçicisi (#myId) sınıf (myClass) ve etiket (div) seçicilerinden daha özgüldür.

Tipin Basamağa Etkisi

CSS kodlarımızı yazdığımız yere göre basamaktaki gücü değişmektedir. Bu sıralama aşağıdaki gibidir:

1. Inline (satıriçi)
2. Internal (dahili)
3. External (harici)

<!DOCTYPE html>
<html>
<head>
    <title>CSS Öncelikleri</title>
    <style>
        p { color: blue; } /* İç (Sayfa İçi) Stil */
    </style>
    <link rel="stylesheet" type="text/css" href="styles.css"> /* Harici Stil */
</head>
<body>
    <p style="color: red;">Bu bir paragraftır.</p> <!-- Inline Stil -->
</body>
</html>

Bu örnekte, paragraf için üç farklı renk tanımlaması yapılmıştır:

1. Harici Stilde green (yeşil),
2. İç Stilde blue (mavi),
3. Inline Stilde red (kırmızı).

CSS’nin işleyiş prensibi gereği, bu durumda inline stil en yüksek önceliğe sahiptir. Yani, web sayfasında paragrafın metni kırmızı renkte görüntülenecektir. Inline stil, hem iç hem de harici stilleri geçersiz kılar. Eğer inline stil tanımlaması olmasaydı, sayfa içi stil olan mavi renk uygulanırdı. En düşük öncelik harici stile aittir. Bu yüzden yeşil renk sadece diğer iki stil tanımı olmadığında uygulanır.

!important Kullanımının Basamağa Etkisi

!important etiketi, belirli bir CSS kuralına en yüksek önceliği verir. Tabiri caizse herkesi ezer. Örneğin:

p {
  color: green !important;
}
p {
  color: blue;
}

Yukarıdaki örneğimizde, p etiketinin metni yeşil (green) olacaktır, çünkü color: green kuralına !important etiketi eklendiğinden diğer tüm normal kuralları geçersiz kılar. Eğer ikisi de !important ile yazılsaydı sonda olan önce olanı ezecekti.

p {
  color: green !important;
}
p {
  color: blue !important; /* Kazanan */
}

Umarım hem CSS nedir sorusuna hem de “cascading” ile ne anlamalıyız sorusuna tatmin edici bir cevap olmuştur.