CSS Formatı: World Wide Web'i Şekillendirmek

HTML bir web sayfasının iskeletiyse, CSS onun cildi, saçları ve kıyafetleridir. Bir web sitesinin nasıl göründüğünü, hissettirdiğini ve farklı ekran boyutlarına nasıl tepki verdiğini belirler. CSS olmasaydı, internet çok sıkıcı, metin ağırlıklı, siyah beyaz bir yer olurdu.

CSS (Cascading Style Sheets - Basamaklı Stil Şablonları), HTML ve JavaScript ile birlikte World Wide Web'in temel teknolojilerinden biridir. Bir .css dosyası, bir web tarayıcısına HTML öğelerini tam olarak nasıl görüntüleyeceğini söyleyen biçimlendirme kuralları içeren düz bir metin (plain text) dosyasıdır.

Bu rehberde CSS'in ne olduğunu, benzersiz "basamaklı" (cascading) sisteminin nasıl çalıştığını, temel sözdizimini (syntax) ve modern, duyarlı (responsive) web tasarımını güçlendirmek için nasıl geliştiğini keşfedeceğiz.

CSS Dosyası Nedir?

Bir .css dosyası, CSS dilinde yazılmış kodlar içerir. HTML gibi, bir programlama dili değildir; bir stil şablonu dilidir (style sheet language). (JavaScript'in yaptığı gibi) hesaplamalar veya mantıksal işlemler gerçekleştirmez. Bunun yerine, bir dizi görsel talimat olarak işlev görür.

Bir .css dosyasını bir HTML belgesine bağladığınızda, web tarayıcısı içeriği (content) anlamak için HTML'i ve sunumu (presentation) anlamak için CSS'i okur.

Örneğin, bir HTML dosyası şunu söyleyebilir: "Bu bir başlıktır." CSS dosyası ise şunu söyleyecektir: "Tüm başlıkları mavi yap, 32 piksel büyüklüğünde yap ve ortaya hizala."

HTML ve CSS'i Neden Ayırıyoruz?

Web'in ilk günlerinde (1990'lar), biçimlendirme (styling) doğrudan HTML kodunun içinde yapılıyordu. Mavi bir başlık istiyorsanız, <font color="blue">Başlık</font> yazmanız gerekiyordu.

Bu, büyük web siteleri için bir kabustu. Bir şirket marka rengini maviden kırmızıya değiştirmek isterse, bir geliştiricinin yüzlerce web sayfasındaki binlerce bağımsız <font> etiketini manuel olarak bulup değiştirmesi gerekiyordu.

CSS, tüm biçimlendirmeyi tek ve ayrı bir .css dosyasına taşıyarak bu sorunu çözdü. Artık bir geliştiricinin CSS dosyasında sadece bir satır kodu değiştirmesi yetiyor ve tüm web sitesindeki her başlık anında kırmızıya dönüyor. Bu prensip Görevlerin Ayrılığı (Separation of Concerns) olarak bilinir.

Temel Kavram: "Basamaklama" (Cascade)

CSS'teki "C" harfi Cascading (Basamaklı) anlamına gelir. Peki bu gerçekte ne demektir?

Web tarayıcıları, birden fazla farklı kaynaktan gelen kuralları birleştirerek bir öğenin nasıl görünmesi gerektiğini belirler. Bazen bu kurallar birbiriyle çelişir. "Basamak", tarayıcının hangi kuralın kazanacağına karar vermek için kullandığı algoritmadır.

Basamaklandırma genellikle şu kuralları izler (en az önemliden en çok önemliye doğru):

Tarayıcı Varsayılanları: Hiç CSS yazmazsanız, tarayıcı kendi varsayılan stillerini uygular (örneğin, bağlantılar mavi ve altı çizilidir).
Harici Stil Şablonları: Ayrı bir .css dosyasından yüklenen stiller.
Dahili Stil Şablonları: HTML belgesinin <head> bölümüne yazılan stiller.
Satır İçi (Inline) Stiller: Doğrudan HTML öğesinin üzerine yazılan stiller (örn. <p style="color: red;">). Bu, diğer hemen hemen her şeyi geçersiz kılar (ezip geçer).
Özgüllük (Specificity): Bir CSS dosyasındaki iki kural çatışırsa, daha "özgül" (spesifik) olan kural kazanır. Örneğin, belirli bir kimliği (ID) hedefleyen bir kural (#benim-butonum), tüm butonları hedefleyen bir kuralı (button) geçersiz kılar.

Temel CSS Sözdizimi (Syntax)

CSS sözdizimi bir seçici (selector) ve bir bildirim bloğundan (declaration block) oluşur.

/* Seçici, bir HTML öğesini hedefler */
h1 {
    /* Burası bildirim bloğudur */
    color: blue;           /* Özellik (Property): Değer (Value) */
    font-size: 24px;
    text-align: center;
}

/* Bir sınıfı (class) hedeflemek (birden fazla öğe için kullanılır) */
.vurgulu-metin {
    background-color: yellow;
    font-weight: bold;
}

/* Bir kimliği (ID) hedeflemek (benzersiz tek bir öğe için kullanılır) */
#ana-menu {
    display: flex;
    background: black;
}

Seçici (Selector): Biçimlendirmek istediğiniz HTML öğesini işaret eder (örn. h1, .sinif-adi, #id-adi).
Özellik (Property): Değiştirmek istediğiniz görsel nitelik (örn. color, font-size, margin).
Değer (Value): O özellik için belirlenen ayar (örn. blue, 24px, 20px).

CSS'in Evrimi

CSS, modern web tasarımının artan karmaşıklığıyla başa çıkmak için onlarca yıl içinde önemli ölçüde gelişmiştir.

CSS1 ve CSS2 (İlk Günler)

İlk zamanlarda CSS, basit renkleri, yazı tiplerini ve kenarlıkları idare eden temel bir dildi. Düzen (layout) oluşturmak inanılmaz derecede zordu. Geliştiriciler, öğeleri bir sayfada konumlandırmak için kayan öğeler (float: left) veya HTML tabloları gibi "hack'ler" (hileler) kullanmak zorundaydı.

CSS3 (Modern Çağ)

1999'da tanıtılan (ancak 2000'lerde yavaş yavaş benimsenen) CSS3, devasa bir yükseltmeydi. Yuvarlak köşeler, gölgeler, gradyanlar ve animasyonlar gibi modüler özellikleri tanıttı; daha önce Photoshop ve ağır görüntü dosyaları gerektiren şeyleri kodla yapabilmeyi sağladı.

Duyarlı Web Tasarımı (Responsive Web Design / Media Queries)

Akıllı telefonların icadı web tasarımını sonsuza dek değiştirdi. Masaüstü monitör için oluşturulmuş bir web sitesi bir iPhone'da korkunç görünüyordu. CSS, geliştiricilerin kullanıcının ekran boyutuna göre koşullu CSS yazmasına olanak tanıyan Medya Sorgularını (Media Queries) tanıttı.

/* Mobil cihazlar için varsayılan stil */
.yan-menu {
    display: none; 
}

/* Ekran 768px'den (masaüstü) daha genişse, yan menüyü göster */
@media (min-width: 768px) {
    .yan-menu {
        display: block;
    }
}

Flexbox ve CSS Grid

2010'larda CSS nihayet yerel (native) olarak düzen sorununu çözdü. 1 boyutlu düzenler (öğeleri bir satır veya sütunda hizalamak) için Flexbox, karmaşık 2 boyutlu düzenler (satır ve sütunlarla tüm sayfa yapılarını oluşturmak) için ise CSS Grid tanıtıldı. Bu araçlar, karmaşık ve duyarlı tasarımlar oluşturmayı önemli ölçüde kolaylaştırdı.

Ön İşlemciler (Preprocessors) ve Çerçeveler (Frameworks)

Saf CSS güçlü olsa da, binlerce satır CSS'i yönetmek zorlaşabilir. Endüstri, yardımcı olmak için yeni araçlar geliştirdi:

Ön İşlemciler (Sass / LESS): Bunlar, geliştiricilerin .css dosyalarında değişkenler (variables), matematik ve iç içe geçmiş (nested) kurallar gibi özellikleri kullanmasına olanak tanır. Kod daha sonra tarayıcının okuyabileceği standart CSS'e "derlenir".
Framework'ler (Tailwind CSS / Bootstrap): Bunlar, geliştiricilerin tekerleği yeniden icat etmek zorunda kalmaması için önceden yazılmış CSS sınıfları (class) sağlar. Örneğin Tailwind CSS, geliştiricilerin HTML dosyalarından hiç ayrılmadan tüm tasarımları oluşturmalarına olanak tanır.

Sonuç

CSS, web'i sıkıcı akademik belgelerden oluşan bir koleksiyondan, bugün kullandığımız zengin, canlı ve etkileşimli bir ortama dönüştürdü. İçeriği tasarımdan zarif bir şekilde ayırarak, geliştiricilerin her cihaza uyum sağlayan güzel kullanıcı arayüzleri oluşturmasına güç verir. İnternet var olduğu sürece, onun güzel görünmesini sağlayan Basamaklı Stil Şablonları da (CSS) var olacaktır.