CSS, yani “Cascading Style Sheets” (Kademeli Stil Sayfaları), isminden de anlaşılacağı gibi “kademeli” bir yapıya sahiptir. Peki bu kademeli yapı ne anlama gelir? İşte bu yazıda CSS’in “kaskad” özelliğini detaylı bir şekilde ele alacağız.
Kaskad Nedir ve Neden Önemlidir?
Kaskad, CSS’de stil kurallarının belirli bir sıraya göre uygulanmasını ifade eder. Yani, bir web sayfasında hangi stilin öncelikli olacağını belirleyen bir mekanizmadır. CSS kurallarının yazıldığı sıralama, tarayıcı tarafından üstten aşağıya doğru okunur ve bu sıralama sayfanın nasıl görüneceğini belirler.
Örneğin, bir web sayfasında bir paragrafın rengini belirlediğimizi düşünelim:
p {
color: green;
}
p {
color: brown;
}
Bu durumda tarayıcı yukarıdan aşağıya doğru kuralları uygular. İlk olarak p etiketinin rengini yeşil (green) olarak ayarlar. Ancak hemen ardından gelen satırda p için kahverengi (brown) rengi tanımlandığı için son tanımlanan kural geçerli olur. Yani paragraflar yeşil yerine kahverengi olarak görünür.
Stil Dosyalarının Sırası Neden Önemli?
CSS dosyaları bir HTML belgesine <link> etiketi ile bağlanabilir. Birden fazla stil dosyası kullanıldığında, hangi dosyanın önce yüklendiği önemlidir. Tarayıcı önce bir stil dosyasındaki kuralları okur, ardından sonraki dosyaları işler ve son tanımlanan kurallar geçerli olur.
Örneğin, HTML sayfamızda şu şekilde iki farklı stil dosyası bağladığımızı düşünelim:
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="theme.css">
Eğer base.css içinde şu stil kuralları varsa:
h2, h3 {
color: navy;
}
Ve theme.css içinde şu kurallar varsa:
h2, h3 {
color: darkred;
}
Tarayıcı, base.css dosyasındaki h2 ve h3 öğelerine lacivert (navy) rengini atar. Ancak ardından theme.css dosyası işlenir ve oradaki kural geçerli olduğu için başlıklar koyu kırmızı (darkred) rengine dönüşür.
Bu durumu şu şekilde düşünebiliriz:
- Önce
base.css dosyası işlenir ve başlıklar lacivert olur.
- Daha sonra
theme.css dosyası işlenir ve yeni renk olan koyu kırmızı uygulanır.
- Son tanımlanan kural kazanır ve başlıklar koyu kırmızı olarak görünür.
Not: Eğer theme.css dosyasını önce yükleseydik, base.css dosyası daha sonra işlendiği için başlıklar yine lacivert olurdu.
CSS Kaskadında Sıralamanın Etkisi
CSS’de stil kurallarının sırası kadar özgüllük (specificity) ve öncelik (importance) gibi faktörler de önemlidir. Örneğin, belirli bir stil !important ile tanımlanırsa, diğer tüm stillerden daha öncelikli hale gelir.
Ancak, öncelik konusunu bir sonraki aşamada detaylı olarak ele alacağız. Şimdilik CSS’in kaskad mantığını anlamak, stil kurallarının sıralamasının sayfa görünümü üzerinde nasıl bir etkiye sahip olduğunu kavramak açısından yeterlidir.
Sonuç
CSS’in kaskad özelliği, sayfalarımızın nasıl stil alacağını belirleyen temel bir mekanizmadır. Stillerin sırası önemlidir ve en son tanımlanan kurallar geçerli olur. Birden fazla stil dosyası kullanıldığında, hangi dosyanın önce işlendiği de sayfanın görünümünü etkileyebilir.
Bu yüzden CSS yazarken stil kurallarının sırasına dikkat etmek, sayfa tasarımını kontrol edebilmek için çok önemlidir. Bir sonraki konuda CSS’in özgüllük (specificity) mantığını öğrenerek, hangi kuralların diğerlerinden daha güçlü olduğunu inceleyeceğiz.