CSS Giriş (CSS Entry) Rehberi: Sözdizimi, Kutu Modeli ve Modern Düzen

CSS: Web’in Görsel Mimarı ve Stil Yönetimi

Modern internet dünyasında bir web sitesini ziyaret ettiğinizde karşılaştığınız renkler, boşluklar, animasyonlar ve sayfa düzeni; arka planda çalışan güçlü bir stil dilinin, yani CSS'in eseridir.

Tarihsel gelişimini ve felsefi kökenlerini incelediğimiz bu yapının, günümüz teknolojisindeki karşılığı sadece "metin renklendirmek" değil, eksiksiz bir Kullanıcı Deneyimi ( UX ) Tasarımı inşa etmektir.

Teknik detaylara ve kod yazımına geçmeden önce, CSS'in üstlendiği bu devasa rolü ve HTML ile olan organik bağını kavramsal olarak anlamak, yazacağımız kodların mantığını oturtmak adına kritik öneme sahiptir.

Yapı ve Sunumun Dansı: HTML ve CSS İlişkisi

Bir web sayfasını insan vücuduna benzetirsek; HTML bu vücudun kemiklerini, organlarını ve iskelet sistemini oluşturur.

Hangi kemiğin nerede duracağını, kolun nerede başlayıp nerede biteceğini HTML belirler.

Ancak bir iskelet tek başına işlevsel olsa da, görsel olarak tamamlanmış bir yapı değildir , işte bu noktada CSS devreye girer.

CSS, bu iskeletin üzerine giydirilen deri, göz rengi, kıyafetler ve hatta o vücudun nasıl hareket edeceğini belirleyen kas hafızasıdır.

HTML tarayıcıya "Burada bir buton var" derken, CSS tarayıcıya "O butonun köşeleri yuvarlak olsun" , veya

"O butonun rengi maviden yeşile dönsün ve gölgesi olsun" emrini verir.

Bu iki dil birbirinden tamamen farklı kurallara sahip olsalar da, modern web tarayıcıları bu ikiliyi milisaniyeler içinde birleştirerek ( render ederek ) bize bütünlüklü bir sayfa sunar.

Bu işbirliği sayesinde, içerik bozulmadan, sadece stil dosyası değiştirilerek bir sitenin tüm atmosferi "ciddi bir kurumsal site"den

"eğlenceli bir blog"a dönüştürülebilir.

Statik Belgeden İnteraktif Deneyime

CSS'in gücü sadece sabit görsel özelliklerle sınırlı değildir.

Web'in ilk yıllarında sayfalar kağıt üzerine basılmış dergiler gibi durağanken, modern CSS yetenekleri sayesinde artık yaşayan, tepki veren arayüzler tasarlanabilmektedir.

CSS; bir menünün açılış hızını, bir resim galerisinin kaydırma efektini veya ekran boyutuna göre içeriğin nasıl yeniden sıralanacağını matematiksel hesaplamalarla yönetir.

Özellikle mobil cihazların kullanımının artmasıyla birlikte CSS, "Duyarlı Tasarım"ın ana motoru haline gelmiştir.

Aynı web sitesinin 27 inçlik bir monitörde üç sütunlu geniş bir yerleşimle, 6 inçlik bir telefon ekranında ise tek sütunlu ve dokunmaya uygun butonlarla görüntülenmesini sağlayan teknoloji tamamen CSS kurallarına dayanır.

Bu esneklik, içeriğin her koşulda okunabilir ve erişilebilir kalmasını sağlar.

Basamaklı (Cascading) Yönetim Anlayışı

CSS'i diğer teknolojilerden ayıran en temel özellik, ismindeki "Cascading" (Basamaklı/Şelale) kelimesinde gizli olan yönetim mantığıdır.

Bir web projesinde stil kuralları tek bir yerden gelmeyebilir; tarayıcının kendi varsayılanları, kullanıcının tercihleri ve geliştiricinin yazdığı kodlar bir arada işlenir.

CSS, bu farklı kaynaklardan gelen binlerce stil emrini belirli bir hiyerarşi ve öncelik sırasına göre süzer.

Bu mantık sayesinde, genel bir kural ( "Tüm yazılar siyah olsun" ) en tepeye yazılabilirken, özel bir istisna

("Sadece uyarı mesajları kırmızı olsun") daha alt basamakta tanımlanabilir.

Bu "genelden özele" akış mantığı, binlerce sayfadan oluşan devasa web projelerinin bile tek bir merkezden, karmaşaya yol açmadan yönetilebilmesine olanak tanır.

İlerleyen bölümlerde göreceğimiz teknik uygulamaların tamamı, bu hiyerarşik mantık üzerine kuruludur.

Tarayıcıda Render Süreci:

Tarayıcı bir web sayfasını yüklediğinde önce HTML dosyasını okuyarak DOM (Document Object Model) ağacını oluşturur.

Ardından CSS kurallarını analiz ederek CSSOM (CSS Object Model) adlı stil ağacını üretir.

Bu iki yapı birleştirilerek Render Tree oluşturulur ve tarayıcı bu ağacı kullanarak sayfanın piksel düzeyinde nasıl çizileceğine karar verir.

CSS Kural Yapısı:

CSS kuralları temel olarak iki bölümden oluşur: bir seçici (selector) ve stil bildirimleri (declaration).

Seçici, stilin hangi HTML elementine uygulanacağını belirler.

Bildirim kısmı ise süslü parantezler içinde yer alan özellik (property) ve değer (value) çiftlerinden oluşur.

Genel Bakış

Modern web geliştirme dünyasında en yaygın kabul gören, en verimli ve sürdürülebilir yöntem Harici Stil Sayfaları kullanımıdır.

Bu yöntem, CSS kodlarının HTML belgesinin içinden tamamen çıkarılıp, .css uzantılı tamamen bağımsız bir dosyada barındırılması prensibine dayanır.

Bu yapıda HTML dosyası ile stil dosyası arasındaki iletişim, HTML'in <head> bölümüne eklenen <link> etiketi sayesinde kurulur.

Tarayıcıya Verilen Mesaj: Bu sayfanın iskeletini oluşturmadan önce, git ve şu adresteki stil kurallarını getir.

Harici stil dosyasının "Altın Standart" olmasının sebebi, "Bir kez yaz, her yerde uygula" mantığıdır detaylı nedenleri aşağıda yer almaktadı.

Merkezi Yönetim ve Ölçeklenebilirlik:

Bu yöntemin en büyük süper gücü, "Bir kez yaz, her yerde uygula" mantığıdır. Tek bir style.css dosyası, sitenizdeki yüzlerce, hatta binlerce farklı HTML sayfasına bağlanabilir.

Örneğin: Sitenizin ana rengini maviden kırmızıya çevirmek istediğinizde, binlerce sayfayı tek tek açıp düzeltmeniz gerekmez.

Harici dosyadaki tek bir satır kodu değiştirdiğinizde, o dosyaya bağlı olan tüm sayfalar saniyeler içinde ve eş zamanlı olarak güncellenir.

Bu, büyük projelerin yönetilebilir olmasını sağlayan temel faktördür.

Yapı ve Sunumun Tam İzolasyonu:

CSS'in doğuş felsefesi olan "Ayrılık İlkesi" en saf haliyle burada uygulanır.

HTML dosyanız sadece içeriğe ( başlıklar, paragraflar, görseller ) odaklanarak tertemiz kalır; stil kodları ise kendi özel dosyasında yaşar.

Bu temiz ayrım, hem kodun okunabilirliğini artırır hem de tasarımcı ve yazılımcıların aynı proje üzerinde birbirlerinin koduna müdahale etmeden çalışabilmesine olanak tanır.

Performans ve Önbellekleme (Caching):

Harici stil sayfaları, site hızını doğrudan artıran bir teknolojiye sahiptir.

Bir kullanıcı sitenize ilk kez girdiğinde, tarayıcı bu harici .css dosyasını indirir ve cihazın hafızasına ( cache ) kaydeder.

Kullanıcı sitenizdeki ikinci, üçüncü veya yüzüncü sayfaya geçtiğinde, tarayıcı bu dosyayı tekrar indirmek yerine hafızasındaki kopyayı kullanır.

Bu durum, veri trafiğini azaltır ve sayfalar arasında gezinirken sayfa yükleme sürelerini hissedilir derecede hızlandırır.

<!DOCTYPE html>
  <html lang="tr">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Basit Stil Örneği</title>

      <!-- Harici CSS dosyası -->
      <link rel="stylesheet" href="style.css?v=1.0.150">
  </head>
  <body>

      <h1>Hoş Geldiniz</h1>
      <p>
          Bu sayfa harici bir CSS dosyası kullanılarak stillendirilmiştir.
          Varsayılan font, arkaplan rengi ve yazı rengi CSS üzerinden uygulanmaktadır.
      </p>

  </body>
  </html>

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
  }

  h1 {
    color: #0056b3;
    text-align: center;
  }

  p {
    line-height: 1.6;
  }

Genel Bakış

Harici dosyaların aksine, stil kodlarının "evden ayrılmadığı" ve doğrudan HTML belgesinin içinde barındığı yöntem Dahili ( Internal ) CSS olarak adlandırılır.

Bu yöntemde CSS kuralları, HTML sayfasının <head> bölümüne açılan <style> etiketleri arasına yazılır.

Böylece tarayıcı, başka bir sunucuya veya dosyaya istek göndermeden, sayfayı okurken stilleri de aynı anda yükler.

Bu yöntem, web geliştirme süreçlerinde stratejik bir "ara çözüm" olarak kullanılır ve belirli avantaj/dezavantaj dengesine sahiptir:

Hızlı Prototipleme ve Deneme:

Bir geliştirici yeni bir tasarım fikri üzerinde çalışırken veya deneysel bir kod yazarken, sürekli style.css dosyası ile HTML dosyası arasında gidip gelmek zaman kaybettirebilir.

Dahili CSS, kodun hemen elinizin altında olmasını sağlar.

Fikir doğrulanıp onaylandıktan sonra bu kodlar genellikle harici dosyaya taşınır.

Tek Sayfalık Özel Projeler: Eğer projeniz, sitenin genelinden tamamen bağımsız bir tasarıma sahip tek bir "Kampanya Sayfası" veya basit bir "Hata Raporu Sayfası" ise, bu sayfa için harici bir dosya oluşturmak gereksiz bir HTTP isteği yaratabilir.

Bu tip "tek atımlık" durumlarda stilleri sayfa içinde tutmak daha pratiktir.

Bağımsızlık: Dosya, herhangi bir harici kaynağa ihtiyaç duymadan kendi kendine yetebilen ( self-contained ) bir yapıya kavuşur.

Bu, özellikle e-posta bülten tasarımlarında veya taşınabilir tekil dokümanlarda tercih sebebidir.

Kritik Dezavantaj: Sürdürülebilirlik Sorunu

Dahili CSS kullanımının en büyük düşmanı "Ölçeklenebilirlik"tir.

Web geliştirmenin temel prensibi olan "Kendini Tekrar Etme" ( DRY ) ilkesi bu yöntemde ihlal edilir.

Yönetim Kaosu: 50 sayfalık bir web siteniz olduğunu düşünün, bu web sitesinde menü rengini "Mavi"den "Siyah"a çevirmek istediğinizde, Dahili CSS kullanıyorsanız 50 farklı HTML dosyasını tek tek açıp o kodu bulup değiştirmeniz gerekir.

Bu, hata yapma riskini artıran ve zaman tüketen bir süreçtir.

Önbellek (Cache) Eksikliği: Harici CSS dosyaları tarayıcı tarafından bir kez indirilip hafızaya alınırken, Dahili CSS her sayfa yenilendiğinde HTML ile birlikte tekrar tekrar okunur.

Bu da büyük sitelerde bant genişliği israfına yol açabilir.

<!DOCTYPE html>
  <html lang="tr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sayfa Başlığı</title>
    <style>
        body {
            font-family: Verdana, sans-serif;
            background-color: #e0f2f7;
            color: #2c3e50;
        }

        h1 {
            color: #e74c3c;
            text-align: left;
        }
    </style>
  </head>
  <body>
  </body>
  </html>

Genel Açıklama

CSS hiyerarşisinin son basamağı olan Satır İçi CSS, stil kurallarının harici bir dosyaya veya sayfa başına değil, doğrudan hedef HTML etiketinin içine style="..." özniteliği kullanılarak enjekte edilmesidir.

Bu yöntem, CSS'in "uzaktan yönetim" yeteneğini devre dışı bırakır ve stille elementi birbirine kilitler.

Bu kullanım şekli, web geliştirme dünyasında iki keskin ucu olan bir bıçak gibidir:

Mekanik Avantajı: Mutlak Öncelik (Specificity)

Satır içi stillerin en belirleyici özelliği, tarayıcı nezdindeki tartışılmaz otoritesidir.

CSS'in "Basamaklı" mantığında, bir stil kuralı elemente fiziksel olarak ne kadar yakınsa o kadar baskındır.

Harici dosyanızda bir butonun rengi "Mavi", sayfa başında "Yeşil" olarak tanımlanmış olsa bile; eğer butonun kendi etiketi içinde

<button style="color: red;"> yazıyorsa, o buton Kırmızı olur.

Tarayıcı, harici dosyalardaki tüm kuralları yok sayar ve satır içi emri uygular.

Bu özellik, genellikle JavaScript ile yapılan anlık görsel değişimlerde ( bir yükleme çubuğunun genişliğini milisaniyeler içinde değiştirmek ) hayati bir rol oynar.

Mimari Dezavantajı: Yapısal Kirlilik ve Yönetim Kâbusu

Satır içi stiller, modern web standartlarının en kutsal kuralı olan "İçerik (HTML) ve Sunum (CSS) Ayrılığı" ilkesini temelden ihlal eder.

Kod Okunabilirliğinin Kaybı: HTML etiketlerinin arasına sıkıştırılmış uzun stil kodları, sayfanın iskeletini görmeyi zorlaştırır.

Temiz bir yapı yerine, içiçe geçmiş karmaşık bir kod yığını ( Spaghetti Code ) oluşur.

Bakım İmkansızlığı: Sitenizdeki 100 farklı butona satır içi stil ile renk verdiğinizi düşünün.

Gelecekte bu rengi değiştirmek istediğinizde, tek bir dosyayı düzenlemek yerine 100 farklı HTML satırını tek tek bulup düzeltmeniz gerekir.

Bu, sürdürülebilir bir proje için kabul edilemez bir durumdur.

Tekrar ve Performans Kaybı: Aynı stili kullanan her element için kodun tekrar tekrar yazılması gerekir.

Bu durum dosya boyutunu gereksiz yere şişirir ve tarayıcının önbellekleme avantajını kullanmasını engeller.

<!DOCTYPE html>
  <html lang="tr">
  <head>
      <meta charset="UTF-8">
      <title>Satır İçi CSS Örneği</title>
  </head>
  <body>

      <p style="color: blue; font-size: 16px; border: 1px solid red; padding: 10px;">
          Bu paragrafın metni mavi renkte, font boyutu 16 pikseldir ve kırmızı kenarlığa sahiptir.
      </p>

      <p>
          Bu paragraf ise normal, varsayılan tarayıcı stiliyle görünür.
      </p>

  </body>
  </html>

Giriş - Genel Açıklama

CSS'in çalışma mantığını ve proje içindeki konumunu öğrendikten sonra, kodlama sürecine başlamak için gerekli olan dijital tezgahımızı, yani "Editörleri" tanımamız gerekir.

CSS, doğası gereği derlenmeye ( compile ) ihtiyaç duymayan, saf metin tabanlı bir dildir.

Teknik Olarak Anlamı: Bilgisayarınızda kurulu olan en basit metin düzenleyiciyi, bu işletim sistemlerine göre değişiklik gösterebilir

( Windows için Notepad, Mac için TextEdit ) açıp kodlarınızı yazabilir ve dosyayı .css uzantısıyla kaydederek çalıştırabilirsiniz.

CSS yazmak için yüksek maliyetli veya karmaşık yazılımlara "zorunlu" değilsiniz.

Ancak, profesyonel web geliştirme dünyasında standart not defterleri kullanılmaz.

Çünkü bu basit araçlar, kodunuzu sadece "düz yazı" olarak görür; nerede hata yaptığınızı söylemez, kodları renklendirmez veya size ipuçları vermez.

Bu nedenle geliştiriciler, kod yazma sürecini hızlandıran, hataları henüz yazarken fark eden ve okumayı kolaylaştıran IDE olarak adlandırılan bir araç kullanır ( Tümleşik Geliştirme Ortamı ) veya gelişmiş Kod Düzenleyiciler kullanır aşağıda modern web dünyasının en güçlü kalemlerine bir bakış yapıyoruz.

Visual Studio Code (VS Code)

Günümüzde web geliştirme dünyasının fiili standardı haline gelmiş, Microsoft tarafından geliştirilen ücretsiz ve açık kaynaklı bir editördür.

VS Code'u diğerlerinden ayıran en büyük güç, IntelliSense teknolojisidir.

Siz henüz "back" yazdığınızda, o sizin "background-color" yazmak istediğinizi tahmin eder ve kodu sizin yerinize tamamlar.

Neden Tercih Edilmeli? Zengin eklenti ( extension ) mağazası sayesinde, editörü kişisel ihtiyaçlarınıza göre özelleştirebilirsiniz.

"Prettier" gibi eklentilerle kodunuzu otomatik düzenleyebilir, "Live Server" ile Server" ile yazdığınız kodu anlık olarak tarayıcıda görebilirsiniz.

Ayrıca yerleşik Git desteği ile sürüm kontrolünü doğrudan editör içinden yönetebilirsiniz.

Sublime Text

Hız ve performansın simgesi olan Sublime Text, özellikle bilgisayar kaynaklarını ( RAM, İşlemci) en az seviyede tüketmesiyle ünlüdür.

VS Code kadar yüklü özelliklerle gelmez, ancak şimşek hızında açılır ve devasa dosyalarda bile takılmadan çalışır.

Neden Tercih Edilmeli? "Çoklu İmleç" ( Multi-Cursor ) özelliği ile aynı anda on farklı satırı düzenleyebilir, "Snippet" desteği ile sık kullandığınız kod bloklarını tek tuşla çağırabilirsiniz.

Minimalist, sade ve sadece koda odaklanmak isteyen geliştiricilerin favorisidir.

Atom (ve Tarihsel Önemi)

GitHub tarafından "21. yüzyılın hacklenebilir metin düzenleyicisi" sloganıyla geliştirilen Atom, açık kaynak felsefesinin önemli bir temsilcisidir.

Modern arayüzü ve modüler yapısıyla uzun süre geliştiricilerin gözdesi olmuştur.

Neden Önemliydi? Atom, bugün VS Code'un da kullandığı "Electron" altyapısının öncüsüdür.

Git ve GitHub entegrasyonunu editör içine gömen ilk popüler araçlardan biridir.

Kullanıcı dostu arayüzü ve topluluk tarafından geliştirilen binlerce teması ile kod yazmayı görsel bir zevke dönüştürmüştür.

Güncel Durum: Proje Sonlandırıldı (2022) Dikkat:

Atom, görevini tamamlamış bir efsane olarak kabul edilir.

GitHub, odak noktasını VS Code üzerine yoğunlaştırmak amacıyla 15 Aralık 2022 tarihinde Atom projesini resmi olarak sonlandırmış

( Sunset ) ve "Arşiv" moduna almıştır.

Artık güvenlik güncellemesi veya yeni özellik almamaktadır.

Bu nedenle, tarihsel önemi büyük olsa da, yeni projeler için kullanılması önerilmez.

Mirasını ve teknolojisini modern editörlere devretmiştir.

WebStorm (JetBrains)

JetBrains tarafından geliştirilen, profesyonel web geliştirme için tasarlanmış güçlü bir IDE'dir.

VS Code'un aksine ücretli bir yazılımdır, ancak öğrenciler ve açık kaynak projeler için ücretsiz lisanslar sunar.

Neden Tercih Edilmeli? Gelişmiş kod analizi, otomatik refactoring ve entegre debugger gibi profesyonel özellikler sunar.

Özellikle büyük ölçekli projelerde ve ekip çalışmalarında, kod kalitesini ve verimliliği artıran araçlar sağlar.

TypeScript, React,Vue ve Angular gibi modern framework'ler için özel destek ve şablonlar içerir.

Brackets (Adobe)

Adobe tarafından geliştirilen, web tasarımcıları için özel olarak tasarlanmış ücretsiz ve açık kaynaklı bir editördür.

En önemli özelliği, "Live Preview" teknolojisidir; yazdığınız CSS kodlarını tarayıcıda anlık olarak görebilirsiniz.

Neden Tercih Edilmeli? Photoshop ve Illustrator gibi Adobe araçlarıyla entegrasyonu sayesinde, tasarımcıların kod yazma sürecine geçişini kolaylaştırır.

Özellikle front-end tasarımcılar ve CSS odaklı geliştiriciler için optimize edilmiş, hafif ve kullanıcı dostu bir arayüze sahiptir.

"Extract" özelliği ile Photoshop dosyalarından renk kodlarını ve ölçümleri doğrudan CSS koduna dönüştürebilirsiniz.

Giriş - Genel Açıklama

CSS fikrinin Håkon Wium Lie tarafından 1994'te ortaya atılmasından sonra, Bert Bos ile birlikte yürütülen titiz çalışmalar meyvesini verdi ve

Aralık 1996'da "CSS Level 1" resmi bir W3C önerisi olarak yayınlandı.

Bu sürüm, web dünyası için bir "milat" niteliğindeydi.

Çünkü CSS1, web sayfalarını basit birer akademik belge olmaktan çıkarıp, görsel bir kimliğe sahip tasarım ürünlerine dönüştürmenin ilk kurallar kitabını yazdı.

CSS1'in getirdiği özellikler bugün bize çok basit gelebilir, ancak o dönemde HTML'in içine hapsolmuş tasarımcılar için bir özgürlük ilanıydı.

Metin Biçimlendirme Devrimi (Typography)

CSS1'in en büyük başarısı, <font> etiketinin yarattığı karmaşayı sona erdirmesiydi.

Bu sürümle birlikte geliştiriciler; yazı tipi ( font-family ), yazı boyutu ( font-size ), renk ( color ) ve hizalama ( text-align ) gibi tipografik kontrolleri HTML'den tamamen ayırdı.

Artık metinler sadece okunacak veri yığınları değil, tasarlanabilir görsel öğelerdi.

Metinlerin satır yüksekliğini ( line-height ) ayarlamak veya kelimeler arası boşlukları yönetmek, web tipografisi'nin basılı yayıncılık standartlarına yaklaşmasını sağlayan ilk adımdı.

Bu, web'in okunabilirliğini ve estetiğini kökten değiştirdi.

Kutu Modeli (Box Model): Web'in Fiziği

CSS1'in mirası denildiğinde akla gelen en kritik kavram, tartışmasız Kutu Modeli'dir.

CSS1, web sayfasındaki her bir öğenin ( bir harfin, bir resmin veya bir başlığın ) görünmez dikdörtgen bir kutu içinde yaşadığını tanımladı.

Bu model sayesinde geliştiriciler, ilk kez bir öğenin çevresiyle olan ilişkisini matematiksel olarak kontrol edebildiler:

Margin (Dış Boşluk): Kutunun diğer kutularla arasındaki mesafedir.

Bu alan tamamen şeffaftır ve bir öğenin "kişisel alanını" belirler.

Komşu öğeleri iterek sayfanın nefes almasını sağlar ve elemanların birbirine yapışık, sıkışık görünmesini engeller.

Kutunun diğer kutularla arasındaki mesafe.

Padding (İç Boşluk): Kutunun içeriği ( metin gibi ) ile kenarlığı arasındaki "nefes alma" payıdır.

Bu tampon bölge, içeriği korur ve genişletir.

Padding olmadan metinler kenarlara yapışır ve okunması zorlaşır; bu boşluk, tasarıma ferahlık ve profesyonel bir hava katar.

Border (Kenarlık): Kutunun sınırlarını çizen, Margin ( dış ) ile Padding ( iç ) arasında duran çizgidir.

Bu hat, öğenin nerede bittiğini görsel olarak işaretler.

İstenirse kalın, renkli veya kesikli çizgilerle tasarıma stilistik bir çerçeve kazandırır; görünmez kutuyu görünür kılar.

Görsel Zenginleşme: Renk ve Arka Plan

Web'in o güne kadarki "gri arka plan üzerine siyah yazı" standardı CSS1 ile yıkıldı.

background-color ve background-image özellikleri, sayfalara doku ve atmosfer kazandırdı.

Bir öğenin veya tüm sayfanın arkasına bir renk atamak, hatta bir görseli arka plan olarak döşemek mümkün hale geldi.

Bu özellik, markaların kurumsal renklerini ve kimliklerini web sitelerine yansıtabilmelerinin önünü açtı.

Liste ve Navigasyon Temelleri

Web'in en önemli işlevi olan "bağlantı kurma" ( hyperlink ) ve "listeleme" yapısı da CSS1 ile stilize edildi.

O dönemde web sitelerindeki menüler, aslında alt alta sıralanmış listelerden ( <ul>, <li> ) ibaretti.

CSS1, bu listelerin başındaki siyah noktaları ( bullet points ) kaldırma veya değiştirme yeteneği sunarak, bugün bildiğimiz

"Navigasyon Menüleri"nin atasını oluşturdu.

Ayrıca linklerin altındaki çizgiyi kaldırmak ( text-decoration: none ) veya üzerine gelince rengini değiştirmek gibi etkileşimler, kullanıcı deneyiminin ilk tohumlarıydı.

İlk Yerleşim Denemeleri: Float CSS1 döneminde modern yerleşim sistemleri henüz mevcut değildi. Geliştiriciler sayfa düzenlerini oluşturmak için çoğunlukla float özelliğini kullanıyordu.

Bu özellik aslında görsellerin metin içinde akmasını sağlamak için tasarlanmıştı; ancak geliştiriciler bunu sütunlu sayfa düzenleri oluşturmak için kullanmaya başladılar.

Yıllar boyunca birçok web sitesi, karmaşık float tabanlı layout teknikleriyle inşa edildi. Bu yaklaşım daha sonra Flexbox ve CSS Grid gibi modern sistemlerin ortaya çıkmasına kadar web tasarımının temel yöntemi olarak kaldı.

<!DOCTYPE html>
  <html lang="tr">

  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>CSS1 Örneği - Temel Stiller</title>
      <link rel="stylesheet" href="style.css?v=1.0.150">
  </head>

  <body>
      <h1>CSS1 Temel Özellikleri</h1>

      <div class="kutu">
          <h2>Metin Biçimlendirme</h2>
          <p>Bu bir paragraf örneğidir. CSS1 ile metin stillerini kontrol edebiliyoruz.</p>
          <p>Yazı tipi, renk, boyut ve hizalama gibi temel özellikler burada gösteriliyor.</p>
      </div>

      <div class="kutu">
          <h2>Bağlantılar (Links)</h2>
          <p>
              <a href="#">Bu bir normal bağlantı</a> -
              <a href="#">Bu da başka bir bağlantı</a>
          </p>
          <p>Bağlantılar mavi renkte ve altı çizili görünür.</p>
      </div>

      <div class="kutu">
          <h2>Listeler</h2>
          <p>Sırasız liste örneği:</p>
          <ul>
              <li>Birinci madde</li>
              <li>İkinci madde</li>
              <li>Üçüncü madde</li>
              <li>Dördüncü madde</li>
          </ul>
      </div>

      <div class="kutu">
          <h2>Kutu Modeli</h2>
          <p>Bu kutular margin, padding ve border özelliklerini gösteriyor.</p>
          <p>Her öğe bir kutu gibi düşünülür ve bu kutuların iç/dış boşlukları ayarlanır.</p>
      </div>

      <div class="kutu">
          <h2>Renk ve Arkaplan</h2>
          <p>Arkaplan beyaz, metinler siyah renkte.</p>
          <p>Başlıklar lacivert (navy) renk kullanıyor.</p>
      </div>

      <p style="text-align: center; margin-top: 30px;">
          <a href="#">Ana Sayfa</a> |
          <a href="#">Hakkımızda</a> |
          <a href="#">İletişim</a>
      </p>
  </body>

  </html>

body {
      font-family: Arial, sans-serif;
      background-color: #ffffff;
      color: #000000;
      margin: 0;
      padding: 20px;
  }

  h1 {
      font-size: 24px;
      text-align: center;
      color: navy;
      margin-bottom: 20px;
  }

  h2 {
      font-size: 20px;
      color: darkblue;
      margin-top: 30px;
  }

  p {
      margin: 10px;
      padding: 5px;
      line-height: 1.5;
  }

  a {
      color: blue;
      text-decoration: underline;
  }

  a:hover {
      color: darkblue;
  }

  ul {
      list-style-type: disc;
      margin-left: 20px;
  }

  li {
      margin-bottom: 8px;
  }

  .kutu {
      border: 1px solid #ccc;
      padding: 15px;
      margin: 10px 0;
      background-color: #f9f9f9;
  }

Genel Bakış

1998 yılında W3C tarafından yayınlanan CSS2, web tasarımını sadece "renkli metinler" olmaktan çıkarıp "gerçek bir mizanpaj sanatına" dönüştüren tarihi bir kırılma noktasıdır.

CSS1 ile metinleri ve renkleri yönetebiliyorduk, ancak kutuları sayfada istediğimiz yere koymak ( bir yan menü yapmak ) hala büyük bir çileydi ve tasarımcılar bu iş için hantal HTML tablolarını ( tables ) kullanmak zorundaydı.

CSS2, bu esareti bitiren özellikleri beraberinde getirdi.

Web sayfalarına Konum ( X-Y ekseni ) ve Derinlik ( Z ekseni ) kazandırarak, modern arayüz tasarımının kapılarını araladı.

Konumlandırma (Positioning): Koordinat Özgürlüğü

CSS2'nin en büyük hediyesi, öğeleri sayfada özgürce hareket ettirebilme yeteneğidir.

Önceleri öğeler sadece alt alta sıralanabilirken, Konumlandırma Modülü ile web sayfası bir koordinat düzlemine dönüştü.

Relative (Göreceli): Bir öğeyi, normalde durması gereken yerden sağa/sola veya yukarı/aşağı kaydırma imkanı verdi.

Kritik Nokta: Öğe görsel olarak hareket etse bile, orijinalde kapladığı alan korunur; yani diğer öğeler o yokmuş gibi yukarı kaymaz.

Genellikle, içinde mutlak konumlandırılacak öğelere bir "sınır" veya "referans noktası" oluşturmak için stratejik bir kapsayıcı olarak kullanılır.

Absolute (Mutlak): Öğeyi sayfa akışından tamamen koparıp, "Sayfanın sağ üst köşesine yapış" gibi kesin emirler vermeyi sağladı.

Absolute ile işaretlenen bir öğe, diğer elementler için artık "yok hükmündedir"; onların üzerine biner veya altından geçer, sayfanın düzenini itip kakmaz.

Bu özellik, tasarımcıya kağıt üzerindeki gibi milimetrik (piksel hassasiyetinde) yerleşim yapma özgürlüğü tanır.

Fixed (Sabit): Sayfa aşağı kaydırılsa bile ekranda asılı kalan ( sabit menüler veya "Yukarı Çık" butonları gibi ) modern arayüzlerin temelini attı.

Çalışma mantığı Absolute'a benzer ancak referans noktası sayfanın kendisi değil, kullanıcının tarayıcı penceresidir.

İçerik ne kadar uzarsa uzasın, Fixed öğe ekranın camına yapışmış bir etiket gibi daima göz önünde kalır.

Z-index: Web'e Üçüncü Boyutun Gelişi

CSS2 öncesinde web sayfaları tamamen 2 boyutluydu; hiçbir öğe diğerinin üzerine çıkamazdı.

CSS2, z-index özelliği ile web'e "Derinlik" kavramını getirdi.

Bu özellik sayesinde tasarımcılar, kartları üst üste bindirebilir, açılır menüleri ( dropdown ) içeriğin üzerinde gösterebilir veya bir "Pop-up" penceresini sayfanın en tepesine yerleştirebilir hale geldi.

"Hangi öğe önde, hangisi arkada?" sorusunun cevabı artık matematiksel bir sayı değeriyle ( z-index puanı ) kontrol edilebilir oldu.

Medya Türleri (Media Types): Çoklu Platform Vizyonu

Web'in sadece bilgisayar ekranlarında değil, farklı ortamlarda da tüketilebileceğini öngören ilk vizyoner adımdır.

CSS2, @media kuralı ile "Eğer bu sayfa yazıcıdan çıktı alınıyorsa, menüleri gizle ve yazı tipini siyah yap" diyebilme yeteneğini sundu.

Bu özellik, her ne kadar daha sonra CSS3 ile evrimleşip "Responsive Tasarım"a dönüşecek olsa da, içeriğin sunumunu ortama göre optimize etmenin ilk tohumuydu.

İçerik Oluşturma (Generated Content): Temiz HTML

CSS2, ::before ve ::after sözde-öğelerini ( pseudo-elements ) tanıtarak, HTML kodunu kirletmeden sayfaya görsel unsurlar eklemenin yolunu açtı.

Geliştiriciler, HTML'e fazladan etiket yazmadan; bir başlığın önüne ikon, bir alıntının sonuna tırnak işareti veya bir listenin yanına özel şekiller ekleyebilir hale geldi.

Bu, "Tasarım için HTML yazma, CSS kullan" felsefesinin en zarif uygulamasıydı.

Sesli Stil Sayfaları CSS2, web'in sadece gören gözler için değil, herkes için olduğunu vurgulayan "Aural Style Sheets" kavramını getirdi.

Ekran okuyucuların metni hangi tonla, hangi hızla veya hangi vurguyla okuyacağını belirlemeyi amaçlayan bu özellikler, o dönemde teknik yetersizlikler nedeniyle yaygınlaşamasa da, bugünkü modern "Web Erişilebilirliği" standartlarının manevi temelini oluşturmuştur.

Görüntüleme Davranışı (Display)

CSS2 ile birlikte display özelliği, bir HTML öğesinin sayfa üzerindeki davranışını kontrol etmenin temel yollarından biri haline geldi.

Bir öğenin blok mu yoksa satır içi mi davranacağını belirlemek artık geliştiricinin kontrolündeydi.

Örneğin display: block öğeyi tüm satırı kaplayan bir kutuya dönüştürürken, display: inline öğeyi metin akışı içinde davranan bir element haline getirir.

Bu sistem sayesinde geliştiriciler, HTML elementlerinin varsayılan davranışlarını değiştirerek daha esnek arayüzler tasarlayabildi.

Taşma Kontrolü (Overflow)

CSS2 ile geliştiriciler, bir kutunun içeriği sınırlarını aştığında nasıl davranacağını belirleyebilme yeteneği kazandı.

overflow özelliği sayesinde taşan içerik gizlenebilir, kaydırılabilir veya otomatik olarak yönetilebilir hale geldi.

Örneğin overflow: hidden taşan içeriği görünmez yaparken, overflow: scroll kullanıcıya bir kaydırma çubuğu sunar.

<!DOCTYPE html>
  <html lang="tr">

  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>CSS2 Basit Örnek</title>
      <link rel="stylesheet" href="style.css?v=1.0.150">
  </head>

  <body>
      <!-- SABİT ÜST BÖLÜM -->
      <div class="ust-bolum">
          <h1>CSS2 Özellikleri</h1>
      </div>

      <!-- ANA İÇERİK -->
      <div class="icerik">
          <div class="kutu">
              <h2 class="ozel-baslik">CSS2 Yenilikleri</h2>
              <p>CSS2, web tasarımında büyük gelişmeler getirdi.</p>
          </div>

          <div class="kutu">
              <h3 class="ozel-baslik">Konumlandırma Özellikleri</h3>
              <div class="konumlu-liste">
                  <ul>
                      <li class="liste-maddesi">position: fixed - Sabit konum</li>
                      <li class="liste-maddesi">position: absolute - Mutlak konum</li>
                      <li class="liste-maddesi">position: relative - Göreceli konum</li>
                      <li class="liste-maddesi">z-index - Katman sıralaması</li>
                  </ul>
              </div>
          </div>

          <div class="kutu">
              <h3 class="ozel-baslik">Sözde Elementler</h3>
              <ul>
                  <li class="liste-maddesi">::before - Öncesine içerik ekleme</li>
                  <li class="liste-maddesi">::after - Sonrasına içerik ekleme</li>
                  <li class="liste-maddesi">content özelliği</li>
              </ul>
          </div>

          <div class="kutu">
              <h3 class="ozel-baslik">Medya Sorguları</h3>
              <ul>
                  <li class="liste-maddesi">@media print - Yazdırma stilleri</li>
                  <li class="liste-maddesi">@media screen - Ekran stilleri</li>
                  <li class="liste-maddesi">Farklı cihazlar için uyum</li>
              </ul>
              <p><strong>Not:</strong> Sayfayı yazdırmayı deneyin. Üst menü gizlenecek.</p>
          </div>

          <div class="kutu">
              <h3 class="ozel-baslik">Diğer Özellikler</h3>
              <ul>
                  <li class="liste-maddesi">Gelişmiş seçiciler</li>
                  <li class="liste-maddesi">Sesli stil sayfaları</li>
                  <li class="liste-maddesi">Tablo stilleri</li>
                  <li class="liste-maddesi">İçerik oluşturma</li>
              </ul>
          </div>
      </div>
  </body>

  </html>

  body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      line-height: 1.6;
      background-color: #f5f5f5;
  }

  .ust-bolum {
      position: fixed;
      top: 0;
      width: 100%;
      background: #2c3e50;
      color: white;
      padding: 15px;
      text-align: center;
      z-index: 100;
  }

  .icerik {
      margin-top: 80px;
      padding: 20px;
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
  }

  .ozel-baslik::before {
      content: "🔹 ";
      color: #e74c3c;
  }

  .liste-maddesi::before {
      content: "✓ ";
      color: #27ae60;
      font-weight: bold;
  }

  .konumlu-liste {
      position: relative;
      left: 20px;
      background: white;
      padding: 15px;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }

  @media print {
      .ust-bolum {
          display: none;
      }

      .icerik {
          margin-top: 0;
      }
  }

  .kutu {
      background: white;
      padding: 20px;
      margin: 15px 0;
      border-radius: 5px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  ul {
      margin: 10px 0;
  }

  li {
      margin: 8px 0;
      padding-left: 5px;
  }

Genel Bakış

2010'lu yıllarla birlikte web dünyası en büyük kırılmasını yaşadı: Akıllı telefonlar ( iPhone ve Android ) hayatımıza girdi.

Artık web siteleri sadece masaüstü bilgisayarlarda değil, avuç içi kadar ekranlarda da çalışmak zorundaydı.

CSS3, tam da bu "Mobil Devrim"in ortasında, geliştiricilerin imdadına yetişen bir süper kahraman gibi doğdu.

Kendisinden önceki sürümlerden farklı olarak modüler bir yapıda gelen CSS3, web'i statik bir belge olmaktan çıkarıp, uygulama benzeri deneyimler sunan dinamik bir platforma dönüştürdü.

Görsel Efektler: Photoshop'a Elveda

CSS3 öncesinde yuvarlak köşeli bir kutu veya gölgeli bir buton yapmak için, tasarımcılar Photoshop'ta resimler kesip bunları kodun içine gömmek zorundaydı.

Bu hem zahmetliydi hem de siteyi yavaşlatıyordu bu durumda yeni bir çözüm gerekiyordu.

Kurtarıcı Özellikler: border-radius ( yuvarlak köşe ), box-shadow ( kutu gölgesi ), linear-gradient ( renk geçişleri ) gibi görsel zenginlik katan özellikler.

Bu özellikler, web'in o zamana kadar sahip olduğu "köşeli ve sert" dijital görünümü yumuşatmıştır.

Border Radius: Eskiden basit bir yuvarlak buton yapmak için dört farklı köşe resmini birleştirmek gerekirken, artık tek satır kodla her türlü geometrik yumuşaklık elde edilebilir.

Box Shadow: Tasarıma "ışık ve gölge" fiziğini getirmiştir; öğelerin ekran üzerinde yüzüyormuş gibi görünmesini sağlayarak hiyerarşi oluşturur.

Gradients: Arka planlar için ağır resim dosyaları indirmek yerine, tarayıcının matematiksel olarak renkleri birbirine karıştırmasını sağlar.

Felsefesi:

"Resim kullanma, kod kullan." CSS3 sayesinde tarayıcılar bu görselleri saniyeler içinde kendileri çizebilir hale geldi.

Bu, sayfa yükleme hızlarını dramatik şekilde artırdı ve tasarımcılara sınırsız bir özgürlük verdi.

Bu değişim, "Sürdürülebilir Tasarım" anlayışının başlangıcıdır.

Eskiden bir sitenin temasını maviden kırmızıya çevirmek için yüzlerce grafik dosyasının Photoshop'ta tek tek açılıp renginin değiştirilmesi ve tekrar kaydedilmesi gerekirdi.

CSS3 ile bu işlem, kod içindeki renk kodunu değiştirmek kadar basitleşti.

Bu sayede tasarım süreçleri haftalardan dakikalara indi ve web çok daha esnek bir yapıya kavuştu.

Hareket ve Canlılık: Dönüşümler ve Animasyonlar

Eskiden web sitelerinde hareketli bir şeyler görmek için ağır ve güvenlik sorunları olan "Flash" eklentisi gerekirdi.

CSS3, animasyonu web'in doğal bir parçası yaptı.

Transform (Dönüşüm): Bir elemanı 2D veya 3D düzlemde döndürme, eğme, boyutlandırma veya konumunu değiştirme gibi anlık görsel dönüşümler yapılmasına olanak tanır.

Bu özellik sayesinde web sayfaları, sıkıcı dikey ve yatay çizgilerden kurtulmuştur.

Bir kartın fare üzerine geldiğinde hafifçe yukarı kalkması veya bir menünün 3 boyutlu bir kapı gibi açılması, kullanıcının siteyle fiziksel bir etkileşime girdiği hissini yaratır.

Ayrıca bu işlemler grafik işlemci ( GPU ) üzerinde yapıldığı için bilgisayarı yormadan çok akıcı sonuçlar verir.

Transition (Geçiş): Bir stil değişikliğinin anlık değil, belirli bir süre içinde yumuşak bir şekilde gerçekleşmesini sağlayarak kullanıcı deneyimini zenginleştirir.

Bu, modern arayüz tasarımındaki "Mikro-Etkileşimlerin" ( Micro-interactions ) temelidir.

Kullanıcıya "Bak, şu an bir şeyler değişti" mesajını, gözü yormadan ve nazikçe iletir.

Bir ışığı anahtardan "çat" diye açmak yerine, dim anahtarıyla yavaşça açmaya benzer; arayüze organik ve profesyonel bir hava katar.

Animation (Animasyon): @keyframes kuralı ile tanımlanan karmaşık, çok adımlı animasyonların ( hareketli grafikler, kayan metinler

vb. ) JavaScript'e ihtiyaç duymadan oluşturulmasını ve döngüye girmesini mümkün kılmıştır.

Bu, bir film yönetmeni gibi sahne sahne senaryo yazabilmek demektir.

Animasyonun %0 anında ne olacağını, %50'sinde nereye gideceğini ve %100'ünde nasıl biteceğini kare kare planlayabilirsiniz.

Bu özellik, efsanevi Flash teknolojisinin web üzerindeki hakimiyetini bitiren ve modern, performanslı hareketli web'i başlatan son darbe olmuştur.

Modern Düzen Sistemleri: Flexbox ve Grid

Web tasarımının yıllarca süren en büyük kâbusu "mizanpaj" ( layout ) kurmaktı.

float gibi aslında resim kaydırmak için üretilen araçlarla sayfa düzeni yapılmaya çalışılıyordu.

CSS3, bu iş için özel olarak üretilmiş iki devrimsel motoru tanıttı:

Flexbox (Esnek Kutu - 1 Boyutlu Zeka):

Tek boyutlu (sadece satır veya sadece sütun) hizalamalar için tasarlanmış bir "düzenleme ustasıdır", "Boşluğu nasıl dağıtayım?" sorusunu çözer.

Menüdeki öğeleri otomatik olarak ortalar, biri silinirse diğerlerini kaydırır ve aralarındaki mesafeyi eşitler.

Özellikle navigasyon çubukları ve dikey ortalama ( vertical centering ) sorunlarını tarihe gömmüştür.

Grid (Izgara - 2 Boyutlu Mimari):

Web sayfasını satırlar ve sütunlardan oluşan bir matematik defteri gibi ele alan, iki boyutlu "inşaat mühendisidir".

Sayfanın genel iskeletini ( Header, Sidebar, Content, Footer ) kurmak için kullanılır.

Flexbox'ın aksine, öğeleri hem yatayda hem dikeyde aynı anda kontrol edebilir.

Karmaşık, dergi tarzı düzenleri kodlamak Grid ile çocuk oyuncağına dönüşmüştür.

Duyarlı Tasarım (Responsive Design): Tek Kod, Her Cihaz

CSS3'ün belki de en hayati yeniliği @media sorgularıdır.

Bu teknoloji, felsefi olarak "İçerik su gibidir, kabının şeklini alır" mantığını web'e getirdi.

Geliştiriciler artık tarayıcıya şu emri verebiliyordu:

"Eğer ekran genişliği 768 pikselden küçükse ( tablet/mobil ), yan menüyü gizle ve yazıları büyüt."

Bu sayede, masaüstü, tablet ve telefon için ayrı ayrı web siteleri yapmak yerine; tek bir kod tabanıyla her ekrana uyum sağlayan akıllı tasarımlar standart hale geldi.

Genel Bakış

Modern CSS artık sadece renk ve konumlandırma dili değil, aynı zamanda dinamik, hesaplama yapabilen ve davranış kontrolü sağlayan bir sistem haline gelmiştir.

CSS3 ile birlikte gelen ileri düzey özellikler sayesinde, geliştiriciler artık JavaScript'e ihtiyaç duymadan birçok görsel ve matematiksel işlemi doğrudan stil katmanında gerçekleştirebilir.

Bu özellikler; kod tekrarını azaltır, responsive tasarımı güçlendirir ve kullanıcı deneyimini daha akıcı hale getirir.

Variables / Custom Properties

CSS değişkenleri, tekrarlayan değerleri merkezi bir noktada tanımlayıp, ihtiyaç duyulan her yerde tekrar kullanmayı sağlar.

Örneğin: Bir projede kullanılan ana renk, yazı boyutu veya boşluk değerleri --primary-color gibi değişkenler ile tanımlanır ve var() fonksiyonu ile çağrılır.

Bu yaklaşım, özellikle büyük projelerde tek noktadan kontrol sağlar; bir değeri değiştirmek tüm tasarımı anında günceller.

Ayrıca değişkenler sadece sabit değerler için değil, tema sistemleri gibi dinamik yapılar için de kritik rol oynar.

Calc() / Clamp(), min(), max()

CSS artık yalnızca sabit değerlerle değil, matematiksel hesaplamalarla da çalışabilir.

calc() fonksiyonu, farklı birimleri ( %, px, vw ) birleştirerek dinamik ölçüler oluşturmayı sağlar.

Bu sayede örneğin: "Ekranın %100'ünden 100px çıkar" gibi ifadeler doğrudan CSS içinde tanımlanabilir.

clamp(), min() ve max() ise responsive tasarımın en güçlü araçlarıdır.

Bu fonksiyonlar sayesinde bir değerin minimum ve maksimum sınırları belirlenebilir.

Böylece tasarım hem esnek olur hem de kontrol dışına çıkmaz.

Filters / Backdrop-filter

CSS3 ile birlikte görsel efektler artık sadece grafik araçlarına bağlı değildir; doğrudan kod ile uygulanabilir hale gelmiştir.

filter özelliği ile bulanıklaştırma, parlaklık, kontrast ve gri tonlama gibi efektler uygulanabilir.

backdrop-filter ise elementin arkasındaki alanı etkileyerek modern UI tasarımlarında sıkça kullanılan cam efektlerini oluşturur.

Bu özellikler, kullanıcı arayüzünü daha derinlikli ve estetik hale getirir.

Multi-column Layout

CSS Multi-column sistemi, içerikleri otomatik olarak birden fazla sütuna bölmeyi sağlar.

column-count ve column-gap gibi özellikler sayesinde, uzun metinler daha okunabilir hale getirilir.

Bu yapı özellikle blog yazıları, makaleler ve haber siteleri için idealdir.

Ancak modern layout sistemleri (Flexbox, Grid) ile birlikte kullanımı daha niş senaryolara indirgenmiştir.

Scroll Snap / Scroll-behavior

CSS ile kaydırma (scroll) davranışları da kontrol edilebilir hale gelmiştir.

scroll-snap özelliği, kaydırma sırasında elementlerin belirli noktalara "kilitlenmesini" sağlar.

Bu özellik özellikle slider, galeri ve mobil uygulama benzeri deneyimlerde kullanılır.

scroll-behavior: smooth ise ani sıçramalar yerine akıcı geçişler sunarak kullanıcı deneyimini iyileştirir.

<!DOCTYPE html>
  <html lang="tr">

  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>CSS3 Modern Kart Örneği</title>
      <link rel="stylesheet" href="style.css?v=1.0.150">
  </head>

  <body>

      <div class="modern-kart">
          <div class="ikon">🚀</div>
          <h2>CSS3'ün Gücü</h2>
          <p>Yuvarlak köşeler, gradyan renkler, gölgeler ve animasyonlar artık tek satır kodla mümkün!</p>
          <p style="font-size: 0.9em; opacity: 0.9;">(Denemek için üzerine gelin)</p>
      </div>

  </body>

  </html>

body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f0f2f5;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
  }

  .modern-kart {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 20px;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
      width: 300px;
      padding: 30px;
      color: white;
      text-align: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .modern-kart:hover {
      transform: translateY(-10px) scale(1.02);
      box-shadow: 0 20px 30px rgba(0, 0, 0, 0.3);
  }

  .ikon {
      font-size: 50px;
      margin-bottom: 10px;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  }

Genel Bakış

CSS3'ün devrim niteliğindeki özelliklerinden sonra W3C, CSS'i tek bir büyük paket olarak yayınlamaktan vazgeçip

"Modüler Gelişim" sürecine geçmiştir.

Bu nedenle resmi olarak bir "CSS4" sürümü yoktur; ancak geliştirici dünyasında, CSS3 sonrası gelen ve dile

"Programlama Mantığı" kazandıran tüm yenilikler "Modern CSS" veya gayri resmi olarak CSS4 şemsiyesi altında toplanır.

Bu dönem, CSS'in sadece bir stil dili olmaktan çıkıp, mantıksal işlemler yapabilen akıllı bir mimariye dönüştüğü dönemdir.

CSS Artık Programlanabilir: Değişkenler (Custom Properties)

Yıllarca CSS'in en büyük eksiği, bir değeri hafızada tutamamsıydı.

Modern CSS ile gelen --degisken-adi yapısı, yazılım dünyasındaki "Değişken" ( Variable ) konseptini CSS'e taşıdı.

Felsefesi: "Merkezi Yönetim." Artık sitenin ana rengini 50 farklı dosyada arayıp bulmak gerekmiyor.

Renk kodunu tek bir değişkene atayıp, tüm sitede o değişkeni kullanabilirsiniz (var(--ana-renk)).

Bu, tema yönetimi ( Karanlık/Aydınlık Mod ) ve büyük projelerin bakımı için hayati bir adımdır.

Ebeveyn Seçici - Parent Selector :has():

Modern CSS ile birlikte, stil dosyamız artık sadece elementleri bulan kör bir araç değil, mantıksal kararlar verebilen akıllı bir sisteme dönüşmüştür.

Web geliştiricilerinin 20 yıldır hayalini kurduğu, CSS tarihinin belki de en büyük devrimidir.

Yıllarca CSS'te kural şuydu:

"Yukarıdan aşağıya ( ebeveynden çocuğa ) stil verebilirsin ama asla geriye ( çocuktan ebeveyne ) bakamazsın." :has() bu kuralı yıktı.

Artık tarayıcıya "Eğer bu kutunun içinde bir resim varsa, kutunun kenarlığını kırmızı yap" diyebiliyoruz.

Bu özellik, daha önce ancak JavaScript yazılarak yapılabilen karmaşık koşullu stillendirmeleri, saf CSS ile ve çok daha yüksek performansla yapmayı mümkün kılmıştır.

Mantıksal Gruplama Seçiciler :is() ve :where():

Büyük projelerde kodun okunabilirliğini ve yönetilebilirliğini artıran süper güçlerdir.

Eskiden aynı stili farklı başlıklara vermek için metrelerce uzayan seçici zincirleri yazmak gerekirdi.

Bu seçiciler, "Kod Tekrarını Önleme" prensibini CSS'e getirerek, birden fazla koşulu tek bir parantez içinde toplamayı sağlar.

Bu sayede hem CSS dosyasının boyutu küçülür hem de tarayıcının kodu okuma yükü hafifler.

Uygulama Benzeri Deneyim: Kaydırma ve Düzen

Web sitelerinin sadece "okunan" değil, mobil uygulamalar gibi "hissedilen" platformlara dönüşmesi için JavaScript'e olan bağımlılık azaltılmış, tarayıcının kendi motoru güçlendirilmiştir.

Scroll Snap (Mıknatıslı Kaydırma): Instagram hikayelerinde veya TikTok videolarında olduğu gibi, parmağınızı kaydırdığınızda içeriğin yarım kalmayıp "mıknatıs gibi" bir sonraki öğeye tam oturmasını sağlayan özelliktir.

Eskiden bunu yapmak için ağır JavaScript kütüphaneleri gerekirken, artık CSS'in doğal bir yeteneğidir.

Bu özellik, özellikle dokunmatik ekranlarda kullanıcıya pürüzsüz, kontrollü ve profesyonel bir galeri/sunum deneyimi yaşatır.

Mantıksal Birimler ve calc(): CSS artık sadece sabit sayıları değil, matematiksel formülleri de anlar.

calc() fonksiyonu sayesinde, "Ekranın tamamından 50 piksel çıkar" (100% - 50px) gibi karmaşık hesaplamalar dinamik olarak yapılabilir.

Farklı ekran boyutlarına ve cihazlara anlık olarak uyum sağlayan "akışkan" ( fluid ) mizanpajlar kurmak için kritik bir araçtır.

Görsel Sınırların Ötesi: Geniş Renkler ve Değişken Fontlar

Donanım teknolojisinin gelişmesiyle birlikte, CSS de bu kapasiteyi kullanabilmek için evrim geçirmiştir.

Geniş Renk Gamı (P3 Colors): Standart web renkleri ( sRGB ), modern ekranların ( Apple Retina, OLED vb. ) gösterebildiği renklerin yanında sönük kalıyordu.

P3 renk uzayı desteği ile CSS, artık insan gözünün görebileceği ancak eski monitörlerin gösteremediği o çok canlı, neon ve parlak renkleri

(High Definition Color) kullanıma sundu.

Bu, web sitelerinin basılı dergiler kadar canlı ve etkileyici görünmesini sağlayan görsel bir sıçramadır.

Değişken Fontlar (Variable Fonts):

Web performansının (Site Hızı) gizli kahramanıdır.

Eskiden bir sitede yazı tipinin hem kalını, hem incesi, hem de italiği kullanılacaksa, tarayıcının 3-4 farklı font dosyasını indirmesi gerekirdi; bu da siteyi yavaşlatırdı.

Değişken font teknolojisi ile artık tek bir dosya yüklenir.

Fontun kalınlığı, eğimi veya genişliği, matematiksel interpolasyon ile anlık olarak hesaplanır.

Bu sayede hem sınırsız tasarım özgürlüğü sunulur hem de site açılış hızı muazzam derecede artar.

Değişkenler (Custom Properties)

CSS3 sonrası W3C, CSS'i tek paket olarak yayınlamaktan vazgeçip modüler bir gelişim sürecine geçti.

Resmi olarak CSS4 yoktur, ancak "Modern CSS" adı altında geliştirici dünyasında tüm yenilikler toplanır.

Bu dönem, CSS'in sadece stil dili olmaktan çıkıp mantıksal işlemler yapabilen akıllı bir mimariye dönüştüğü dönemdir.

Modern CSS ile CSS değişkenleri ( --degisken-adi ) geldi.

Tek bir değişkeni tüm projede kullanarak renk, ölçü ve stil yönetimini kolaylaştırır, temalar ve büyük projeler için kritik bir araçtır.

Parent Selector :has() :has() seçici sayesinde çocuktan ebeveyne stil uygulamak mümkün oldu.

Örneğin: bir kutunun içinde bir resim varsa kenarlığını kırmızı yapabilirsiniz.

JavaScript kullanmadan koşullu stillendirme sağlar.

Mantıksal Gruplama Seçiciler :is() ve :where() :is() ve :where() ile birden fazla seçici tek parantez içinde toplanabilir, kod tekrarını önler ve CSS dosyalarını okunabilir, yönetilebilir hâle getirir.

Akışkan Düzen ve Kaydırma Scroll Snap ve calc() gibi özellikler sayesinde içerikler pürüzsüz şekilde hizalanabilir, ekran boyutuna göre dinamik düzenler oluşturulabilir ve bu sayede mobil uygulama benzeri deneyimler yaratılır.

Geniş Renkler ve Değişken Fontlar P3 renk desteği ve variable fonts ile web siteleri artık daha canlı ve hızlı.

Tek bir font dosyası ile kalınlık, eğim ve genişlik ayarlanabilir; performans artar ve tasarım özgürlüğü yükselir.

<!DOCTYPE html>
  <html lang="tr">

  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Modern CSS (CSS4) Örneği</title>
      <link rel="stylesheet" href="style.css?v=1.0.150">
  </head>

  <body>

      <div class="liste">
          <div class="kart">
              <span>Standart Ürün</span>
              <span class="etiket">Stokta</span>
          </div>

          <div class="kart">
              <span>Süper Fırsat</span>
              <span class="etiket etiket-yeni">YENİ!</span>
          </div>

          <div class="kart">
              <span>Eski Sezon</span>
              <span class="etiket">İndirimde</span>
          </div>
      </div>

  </body>

  </html>

:root {
      --ana-renk: #6366f1;
      --vurgu-renk: #ef4444;
      --bg-renk: #f8fafc;
      --kart-bg: #ffffff;
      --golge: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }

  body {
      font-family: system-ui, -apple-system, sans-serif;
      background-color: var(--bg-renk);
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
  }

  .liste {
      display: grid;
      gap: 20px;
  }

  .kart {
      background: var(--kart-bg);
      padding: 20px;
      border-radius: 12px;
      box-shadow: var(--golge);
      border: 2px solid transparent;
      width: 300px;
      display: flex;
      justify-content: space-between;
      align-items: center;
  }


  .kart:has(.etiket-yeni) {
      border-color: var(--vurgu-renk);
      background-color: #fef2f2;
  }

  .etiket {
      font-size: 12px;
      padding: 4px 8px;
      border-radius: 20px;
      background: #e2e8f0;
      color: #475569;
  }

  .etiket-yeni {
      background: var(--vurgu-renk);
      color: white;
      font-weight: bold;
  }

Genel Bakış

Şu ana kadar öğrendiğimiz CSS kuralları, sözdizimi ve seçiciler; web geliştirme dünyasında "Vanilla CSS" olarak adlandırılır.

Bu temel bilgi, bir evi inşa etmek için tuğlanın, harcın ve malanın nasıl kullanılacağını bilmek gibidir ve bu bilgi olmadan sağlam bir yapı kurulamaz.

Ancak modern web dünyası, sadece tek katlı evlerden ibaret değildir; binlerce odası olan gökdelenler ( e-ticaret siteleri,

sosyal medya platformları, yönetim panelleri ) inşa etmemiz gerekir.

İşte bu noktada, her tuğlayı tek tek elle koymak hem zaman açısından imkansız hale gelir hem de insan hatasına açık bir süreç doğurur.

Büyük Projelerde CSS Yönetimi

Gerçek dünyadaki büyük ölçekli projelerde geliştiricilerin en büyük düşmanı "zaman" ve "karmaşıklık"tır.

Binlerce satır CSS kodunu sıfırdan yazmak, bunları her tarayıcıda test etmek ve ekip arkadaşlarıyla uyum içinde çalışmak devasa bir iş gücü gerektirir.

Bu sorunu çözmek için web topluluğu zaman içinde kendi "Ekosistemini" oluşturmuştur.

Bu ekosistem, geliştiricinin omuzlarındaki yükü alan, tekrar eden işleri otomatize eden ve standartlaşmayı sağlayan güçlü araçlardan oluşur.

Bu araçlar, CSS'in yapamadığı veya yapmakta zorlandığı ( değişken kullanımı, matematiksel işlemler, hızlı mizanpaj kurma gibi) konuları çözerek, kod yazma sürecini bir "yazım" işinden çıkarıp, verimli bir "mühendislik" sürecine dönüştürür.

Unutmayın; bu araçlar CSS'in yerini almaz, CSS'in gücüne güç katarak onu yönetilebilir hale getirir.

Genel Bakış

CSS'in temellerini öğrenmek bir zorunluluktur; ancak gerçek dünyada, kısıtlı teslim süreleri ve büyük ölçekli projeler söz konusu olduğunda, her satır kodu sıfırdan yazmak her zaman en verimli yol olmayabilir.

Geliştiricilerin "Tekerleği yeniden icat etmemek" ilkesiyle hareket ettiği bu noktada, CSS Framework'leri devreye girer.

Bu framework'ler, dünya genelindeki uzman geliştiriciler tarafından yazılmış, binlerce farklı cihazda test edilmiş, tarayıcı uyumluluk sorunları giderilmiş hazır stil kütüphaneleridir.

Bir framework kullanmak, inşaata başlarken tuğlaları tek tek dökmek yerine, fabrikadan gelen sağlam ve ölçülü hazır blokları kullanmaya benzer.

Bu yaklaşım, projelerin geliştirme süresini haftalardan günlere indirebilir.

Piyasada onlarca framework bulunsa da, yaklaşımları (felsefeleri) açısından iki dev isim öne çıkmaktadır:

Bootstrap (Bileşen Odaklı Yaklaşım - Component Based)

Twitter ekibi tarafından geliştirilen ve web dünyasında "standartlaşmayı" sağlayan en köklü framework'tür ama Bootstrap'ın felsefesi

"Hazır Bileşenler" üzerine kuruludur.

Nasıl Çalışır? Siz sadece HTML kodunuza .btn veya .navbar gibi bir sınıf ismi eklersiniz; Bootstrap arka planda o sınıf için hazırlanmış tüm renk, boyut, gölge ve etkileşim kodlarını otomatik olarak uygular.

Avantajı: Tasarımcı olmayan bir yazılımcı bile, Bootstrap kullanarak dakikalar içinde modern, düzgün görünen ve tüm cihazlarda ( mobil/masaüstü ) kusursuz çalışan bir web sitesi veya yönetim paneli ( Dashboard ) çıkarabilir.

Kullanım Alanı: Özellikle hızlı prototipleme (MVP), kurumsal yönetim panelleri ve tasarımın çok özgün olmasının gerekmediği, işlevin ön planda olduğu projeler için "vazgeçilmez" bir tercihtir.

Tailwind CSS (Yardımcı Sınıf Odaklı Yaklaşım - Utility First)

Son yıllarda web tasarım trendlerini tamamen değiştiren, Bootstrap'ın tam zıttı bir felsefeye sahip modern bir yaklaşımdır.

Tailwind size hazır bir "yemek" sunmaz, yemeği yapmanız için gereken "malzemeleri" ( atomik sınıfları ) sunar.

Nasıl Çalışır? Tailwind'de "hazır bir buton" yoktur ama sınıf isimleri vardır.

Bir butonu oluşturmak için HTML elementinin içine isimler içerisine gömülmüş css sınıf isimlerini yazarak eklersiniz, bg-blue-500

( arka plan mavi ), p-4 ( iç boşluk ), rounded-lg ( yuvarlak köşe), text-white ( beyaz yazı ) gibi küçük, tek işlevli sınıfları birleştirerek yazarsınız.

Avantajı: Bootstrap sitelerinin birbirine benzeme ( "Cookie-cutter" etkisi ) sorununu ortadan kaldırır.

Geliştiriciye tasarım üzerinde piksel seviyesinde Tam Kontrol sağlar.

Ayrıca, projeniz bittiğinde Tailwind kullanılmayan tüm sınıfları temizleyerek, dosya boyutunu inanılmaz derecede küçültür.

Kullanım Alanı: Kendine özgü, markaya özel tasarımı olan modern web siteleri, e-ticaret platformları ve performansın kritik olduğu projeler için günümüzün en popüler tercihidir.

Giriş - Genel Açıklama

CSS, görsel tasarım için mükemmel bir dil olsa da, özünde bir "Programlama Dili" değildir.

Döngüler kuramaz, matematiksel hesaplamalar yapamaz veya karmaşık mantıksal şartlar ( if/else ) koşamazdı.

Küçük projelerde bu bir sorun yaratmasa da, binlerce satırlık kod içeren devasa projelerde CSS'in bu "statik" yapısı, kodun kendini sürekli tekrar etmesine ve yönetilemez hale gelmesine neden olur.

İşte bu noktada devreye CSS Ön İşlemcileri ( Preprocessors ) girer.

Bu araçlar, CSS'in eksik olan mantıksal tarafını tamamlayan birer "üst katman" dildir.

Siz kodunuzu SASS veya LESS gibi daha gelişmiş bir dille yazarsınız; bu araçlar yazdığınız kodu, tarayıcıların anlayabileceği standart, saf CSS koduna dönüştürür.

Bu dönüştürme işlemine teknik olarak "Derleme" ( Compiling ) denir.

Ön işlemciler, CSS yazma sürecini bir "Not Defteri"nden çıkarıp, akıllı bir "Fabrika Üretimi"ne dönüştürür.

Değişkenler (Variables) - Merkezi Yönetim: Renk kodlarını, font boyutlarını veya kenar boşluklarını bir değişkene atayarak ( $ana-renk: #ff0000; ), yüzlerce yerde kullanılan bir rengi tek bir satırı değiştirerek güncelleyebilirsiniz.

İç İçe Yazım (Nesting) - Görsel Hiyerarşi: Normal CSS'te bir alt elemanı seçmek için ebeveyn adını tekrar tekrar yazmanız gerekir ( .menu ul, .menu li, .menu a ).

Ön işlemcilerde ise HTML yapısına benzer şekilde, kodları iç içe yazabilirsiniz.

Bu, kodun okunabilirliğini ve hangi stilin kime ait olduğunu anlamayı muazzam derecede kolaylaştırır.

Karışımlar (Mixins) - Kod Tekrarına Son: Belki de en güçlü özelliktir.

Sık kullandığınız bir stil grubunu ( gölgelendirme efektleri veya karmaşık bir animasyon kodu gibi ) bir "paket" haline getirip isimlendirebilirsiniz.

Daha sonra bu paketi tek bir satırla istediğiniz yerde çağırabilirsiniz. Bu, "Kendini Tekrar Etme" (DRY) prensibinin temelidir.

Matematik ve Fonksiyonlar: Kod içinde toplama, çıkarma, bölme işlemleri yapabilir; renklerin tonunu %10 aç veya %20 koyulaştır gibi programatik komutlarla yönetebilirsiniz.

SASS (Syntactically Awesome Style Sheets)

SASS, günümüzde web geliştirme dünyasının tartışmasız endüstri standardıdır.

Ruby dili temel alınarak geliştirilmiş olsa da, bugün her ortamda çalışabilmektedir.

SCSS Sözdizimi: SASS, iki farklı yazım şekli sunar ancak en popüleri SCSS ( .scss ) formatıdır.

SCSS, normal CSS'e çok benzer (süslü parantezler ve noktalı virgüller kullanır).

Bu sayede normal CSS bilen biri, neredeyse hiç zorlanmadan SASS yazmaya başlayabilir.

Neden Lider?: Bootstrap v4/v5 ve Tailwind gibi dev kütüphaneler SASS altyapısı üzerine kurulmuştur.

Modüler yapısı sayesinde stil dosyalarını parçalara bölüp (_header.scss, _footer.scss) tek bir ana dosyada birleştirmek çok kolaydır.

LESS (Leaner Style Sheets)

JavaScript tabanlı bir ön işlemcidir. SASS ile hemen hemen aynı yeteneklere sahiptir ancak çalışma mantığı biraz daha farklıdır.

Tarihsel Rolü: Bir dönemin en popüler CSS framework'ü olan Bootstrap'ın ilk versiyonları LESS ile yazıldığı için büyük bir popülarite kazanmıştır.

Kullanım Alanı: JavaScript ile entegrasyonu çok kolay olduğu için, özellikle JS ağırlıklı projelerde veya eski altyapıya sahip sistemlerde hala tercih edilmektedir.

Ancak güncel trendler ve modern framework'lerin çoğu ibreyi SASS tarafına çevirmiştir.

Web'in Doğuşu

İnternetin modern tarihi, 1989 yılında CERN'in koridorlarında Tim Berners-Lee'nin vizyonuyla başladı.

Berners-Lee, World Wide Web'i (WWW) tasarlarken öncelikli amacı estetik değil, küresel bilginin hızlı paylaşılmasıydı.

Bu dönemde web, bilim insanlarının araştırma makalelerini ve deneysel verilerini paylaşabildikleri devasa bir dijital kütüphane olarak kurgulanmıştı.

İlk Web Sayfalarının Yapısı

İlk web sayfaları bugünkü renkli ve dinamik yapılardan çok uzaktı. Varsayılan gri arka plan üzerinde yalnızca siyah metinler ve diğer sayfalara giden mavi bağlantılar bulunuyordu.

Bu sadelik bir eksiklik değil bilinçli bir tercihti; çünkü HTML'in görevi yalnızca belgenin yapısını tanımlamaktı.

Görünüm tamamen kullanıcının tarayıcısına ve cihazının teknik kapasitesine bırakılmıştı.

Web'in Medya Platformuna Dönüşmesi

1990'ların ortalarında web akademik çevrelerden çıkıp evlere ve ofislere ulaşmaya başladı.

Marc Andreessen'in geliştirdiği Mosaic ve daha sonra gelen Netscape Navigator, görselleri metinle birlikte gösterebilen ilk popüler tarayıcılardı.

Bu gelişme web'i "bilgi deposu" olmaktan çıkarıp "medya platformuna" dönüştürdü.

Tasarım İhtiyacının Ortaya Çıkışı Web artık yalnızca bilim insanlarının değil; sanatçıların, pazarlamacıların ve markaların da platformu haline geldi.

Kullanıcılar dergi kapakları kadar etkileyici, reklamlar kadar renkli web siteleri talep etmeye başladılar.

Ancak HTML dili bu görsel kontrolü sağlamak için tasarlanmamıştı.

Web Tasarımında Kaos Dönemi

Tasarım talepleri arttıkça, tarayıcı üreticileri HTML'e görsel etiketler eklemeye başladı.

Metinleri ortalamak, renklendirmek veya boyutlandırmak için sayfa içine çok sayıda stil etiketi yazılıyordu.

Yapısal kodlar ile stil kodları birbirine karışarak yönetilmesi zor "dijital bir karmaşa" oluşturdu.

HTML tabloları mizanpaj aracı olarak kullanılmaya başladı ve web yapısal olarak hantallaştı.

CSS Fikrinin Doğuşu İşte CSS fikri, web'in görsel karmaşasının zirveye ulaştığı bu dönemde ortaya çıktı.

Amaç, yapısal kod ile görsel stilin birbirinden ayrılması ve web sayfalarının daha düzenli, sürdürülebilir ve yönetilebilir hale getirilmesiydi.

Web Krizinin Ortaya Çıkışı

Web dünyasının stil etiketleri ve tarayıcı savaşları arasında boğulduğu, kodların yönetilemez bir hale geldiği o karanlık dönemde, çözüm yine web'in doğduğu yerden, CERN'den geldi.

Håkon Wium Lie'nin Önerisi Tim Berners-Lee ile birlikte çalışan Norveçli bilgisayar bilimcisi Håkon Wium Lie, 10 Ekim 1994 tarihinde web topluluğuna gönderdiği bir e-posta ile sadece yeni bir dil değil, aynı zamanda web tasarımı için yeni bir düşünce biçimi önerdi.

"Cascading HTML Style Sheets" başlıklı bu öneri, o güne kadar yapılan hatalı uygulamalara karşı bir manifesto niteliğindeydi.

Lie, web'in geleceğinin içerik (HTML) ile sunumun (stil) birbirinden kesin çizgilerle ayrılmasına bağlı olduğunu görmüştü.

İçerik ve Sunumun Ayrılması

Ona göre HTML, bir binanın çelik iskeleti gibi yalnızca yapıyı taşımalıydı.

Binanın rengi, boyası ve dekorasyonu ise tamamen ayrı bir katman tarafından yönetilmeliydi.

Bu ayrım web'in hem erişilebilir kalmasını sağlayacak hem de tasarımcılara daha önce sahip olmadıkları bir esneklik sunacaktı.

Cascading Mantığı

Håkon Wium Lie'nin önerisini diğer stil sistemlerinden (DSSSL veya FOSI gibi karmaşık yapılardan) ayıran en önemli özellik, isminin ilk kelimesi olan "Cascading" kavramıydı.

Web sayfaları farklı ekran boyutlarında, farklı tarayıcılarda ve hatta ekran okuyucularda görüntüleniyordu.

Bu nedenle stil tek bir otorite tarafından belirlenemezdi; kurallar bir şelale gibi yukarıdan aşağıya akmalıydı.

Tarayıcı ayarları, kullanıcı tercihleri ve site tasarımcısının kuralları belirli bir matematiksel ağırlıkla birleşerek son görüntüyü oluşturmalıydı.

Bu yaklaşım, web tarihinde tasarımcı ile kullanıcı arasında kurulan ilk demokratik uzlaşı olarak kabul edilir.

Bert Bos ile İş Birliği

Bu vizyoner öneri kısa süre sonra Hollandalı geliştirici Bert Bos'un dikkatini çekti.

O dönemde kendi tarayıcısı "Argo" üzerinde çalışan Bos, Lie ile güçlerini birleştirdi.

Lie'nin "Cascading" vizyonu ile Bos'un teknik bilgisi birleşerek CSS'in temellerini oluşturdu.

CSS1 Standardının Yayınlanması

İkili, W3C çatısı altında yıllar süren çalışmaların ardından 1996 yılının Aralık ayında "CSS Level 1" standardını yayınladı.

Bu an, web tasarımının olgunluk çağına geçiş noktası olarak kabul edilir.

Artık renkler, fontlar ve hizalamalar HTML kodlarının içine gömülmüş etiketlerle değil, tamamen bu iş için tasarlanmış bir stil diliyle yönetilecekti.

CSS'in doğuşu, web'i sadece bir bilgi ağı olmaktan çıkarıp üzerine tasarım ve sanat inşa edilebilecek sağlam bir mimariye dönüştürdü.

Genel Bakış

Tarihsel süreci ve felsefi ayrımı anladıktan sonra, CSS'in bu görevi teknik olarak nasıl yerine getirdiğine bakmamız gerekir.

CSS, doğası gereği bir "programlama dili" ( Java veya Python gibi hesaplama yapan) değil, bir "bildirim dili"dir.

Yani tarayıcıya bir işlemi "nasıl" hesaplayacağını değil, sonucun "ne" olması gerektiğini söyleriz.

Bu iletişim, son derece katı ve matematiksel bir cümle yapısına dayanır.

Tarayıcı ile kurulan bu diyaloğun temel birimi "Kural Seti" olarak adlandırılır ve bu set Seçici ve Bildirim Bloğu adında iki ana beyinden oluşur.

Hedefleme Sistemi: Seçici (Selector)

Bir tasarım komutunun çalışabilmesi için önce "kime" uygulanacağının bilinmesi gerekir.

HTML sayfasında yüzlerce farklı element ( paragraf, başlık, resim ) bulunabilir.

CSS'in ilk görevi, bu kalabalık içinden stil uygulanacak doğru elementi cımbızla çekip almaktır.

İşte Seçici yani selector, bu hedefleme mekanizmasıdır.

Seçici, tarayıcıya "Git ve sayfadaki tüm başlıkları bul" veya "Sadece şu özel isme sahip kutuyu bul" diyen işaret parmağıdır.

Eğer seçici yanlış tanımlanırsa veya matematiksel olarak yeterince spesifik değilse, yazdığınız stil kuralları boşluğa düşer veya istenmeyen elementleri etkiler.

Bu yüzden CSS ustalığı, renkleri bilmekten çok, bu hedefleme sistemini seçicilerden bahsediyoruz, bunlara doğru yönetebilmekten geçer.

Emir Komuta Merkezi: Bildirim Bloğu (Declaration Block)

Seçici ile hedef belirlendikten sonra, o hedefe ne yapılacağının söylenmesi gerekir.

Bu kısım süslü parantezler { } arasına yazılan Bildirim Bloğudur.

Burası, stilin tanımlandığı mutfaktır.

Bir bildirim bloğu, kendi içinde "Özellik" ve "Değer" adı verilen ikili bir yapıdan oluşur.

Özellik (Property): Değiştirmek istediğimiz niteliktir ( Renk, Boyut, Kenarlık gibi).

"Neyi değiştirmek istiyorsun?" sorusunun cevabıdır.

Değer (Value): O niteliğin yeni durumudur (Kırmızı, 20 piksel, Kalın ). "Nasıl olsun?" sorusunun cevabıdır.

Bu yapıyı gerçek dünyadan bir analoji ile düşünürsek; Seçici, sokaktaki bir "Arabayı" işaret eder.

Özellik arabanın "Rengi"dir, Değer ise "Mavi"dir.

Bilgisayar dilinde bu, Araba { Renk: Mavi; } şeklinde ifade edilir.

Sözdiziminin (Syntax) Kritik Önemi

CSS, hatayı tolere etmeyen bir noktalama düzenine sahiptir.

Özellik ve Değer birbirinden iki nokta üst üste (:) ile ayrılır; bu, tarayıcıya "Özellik bitti, şimdi değeri söylüyorum" demektir.

Her bir komut satırı ise noktalı virgül (;) ile biter.

Noktalı virgül, CSS'in cümlesindeki "nokta"dır.

Tarayıcıya "Bu emir bitti, sıradaki emre geçebilirsin" mesajını verir.

Eğer bu noktalama işaretlerinden biri eksik olursa, tarayıcı o satırı ve genellikle ondan sonra gelen kodları anlamlandıramaz ve yok sayar.

Dolayısıyla CSS yazmak, sadece estetik bir vizyon değil, aynı zamanda titiz bir dikkate dayalı gramer disiplini gerektirir.