CSS

CSS Nedir

CSS, HTML ile kurulan yapının nasıl görüneceğini anlatan dildir. Her kural bir seçici ve süslü parantez içinde property: value; çiftlerinden oluşur. Seçici hangi elementlerin stilleneceğini, özellikler de neyin değişeceğini söyler.

.card {
  padding: 1rem;
  color: #1f2937;
}

Seçiciler

En sık kullanılan seçiciler şunlardır:¹

Class bir sayfada istendiği kadar kullanılabilir, ID ise sayfada bir kez kullanılır.¹ Seçiciler combinator ile birleştirilerek elementin HTML'deki konumuna göre seçim yapılır: nav a nav içindeki tüm linkleri, ul > li yalnızca doğrudan çocukları, h2 + p başlıktan hemen sonraki paragrafı seçer.² :hover gibi pseudo-class'lar elementin durumunu, ::before gibi pseudo-element'ler elementin bir parçasını seçer.²

Hangi Kural Kazanır

Aynı elemente birden çok kural uyduğunda tarayıcı hangisinin uygulanacağına üç kavramla karar verir: cascade, specificity ve inheritance.³

Cascade

Cascade, çakışan kurallar arasında kazananı seçen algoritmadır.⁴ CSS spesifikasyonuna göre tarayıcı sırasıyla şunlara bakar: kuralın kaynağı ve !important olup olmadığı, style attribute ile yazılmış olup olmadığı, hangi cascade layer'da durduğu, seçicinin specificity'si ve son olarak kodda hangisinin sonra geldiği.⁵ Günlük işte çakışmaların çoğu son iki adımda çözülür: specificity eşitse sonra yazılan kural kazanır.⁴

Specificity

Specificity, seçicinin ne kadar "özel" olduğunu gösteren üç parçalı bir puandır: ID sayısı, class/attribute/pseudo-class sayısı, type/pseudo-element sayısı. Puanlar soldan sağa karşılaştırılır ve en yüksek puanlı kural kazanır; * puana bir şey eklemez.⁶

#header a     { color: red; }   /* (1, 0, 1) kazanır */
.nav .link    { color: blue; }  /* (0, 2, 0) */
nav a         { color: green; } /* (0, 0, 2) */

Soldan karşılaştırıldığı için tek bir ID, kaç class olursa olsun class'lardan oluşan bir seçiciyi yener. Bu yüzden ID ile stil vermek ve !important ile kural zorlamak, ileride o kuralı ezmeyi zorlaştırır. Gerçek sitelerde bu sık görülür: 100.000'den fazla sitenin incelendiği bir araştırmada ortanca site 154 !important içeriyordu.⁷

Büyük projelerde bu sorunu çözmek için cascade layers (@layer) vardır: layer sırası specificity'den önce gelir, böylece bir stil grubunun önceliği seçici yarışına girmeden belirlenir.⁸

Inheritance

Bazı özellikler ebeveynden çocuğa miras geçer, bazıları geçmez. color ve font özellikleri miras alınır; width, margin, border alınmaz.³ Bu yüzden body'ye verilen color sayfanın tamamına yayılır.

Kutu Modeli

Tarayıcı her elementi bir kutu olarak çizer. Kutu içten dışa dört katmandan oluşur: content (içerik), padding (iç boşluk), border (kenarlık) ve margin (dış boşluk).⁹

Varsayılan modelde width yalnızca içeriğe uygulanır, padding ve border üstüne eklenir. width: 200px ve padding: 20px verilen bir kutu ekranda 240px yer kaplar. box-sizing: border-box ile width border dahil tüm kutuyu kapsar, hesap tahmin edilebilir olur.¹⁰

*,
*::before,
*::after {
  box-sizing: border-box;
}

Kutunun dışa nasıl davrandığını display belirler. Block kutular yeni satırda başlar ve width/height alır (div, p, h1). Inline kutular satır içinde akar; width ve height uygulanmaz, dikey margin ve padding çevredeki satırları itmez (span, a).⁹ Üst üste gelen iki block elementin dikey margin'leri toplanmaz, birleşir ve büyük olan kalır; buna margin collapsing denir.⁹

Birimler

px gibi mutlak birimler her zaman aynı boyutu verir. Göreli birimler ise bir başka değere göre hesaplanır, bu yüzden web'in esnek yapısına daha iyi uyar.¹¹

Font boyutunu px ile vermek, kullanıcının tarayıcıda seçtiği yazı boyutunu yok sayar; rem bu tercihe uyar.¹¹ Okunabilir satır uzunluğu için max-width: 60ch gibi bir değer işe yarar.¹¹ Değerler calc(100% - 2rem) gibi hesaplamalarla birleştirilebilir.¹²

Gerçek sitelerde px hâlâ her yerde: sitelerin %98,28'i px, %80,15'i rem kullanıyor.⁷

Flexbox ve Grid

Modern sayfa düzeni iki araçla kurulur. Flexbox tek boyutlu düzen içindir: öğeleri bir satır ya da sütun boyunca dizer. Grid iki boyutludur: satır ve sütunları birlikte kontrol eder.¹³

Flexbox

Flex container'ın bir ana ekseni (öğelerin dizildiği yön) ve ona dik bir çapraz ekseni vardır. justify-content ana eksende, align-items çapraz eksende hizalar.¹⁴ Varsayılan flex-direction: row'da ana eksen yatay, çapraz eksen dikeydir; bu yüzden align-items öğeleri dikeyde hizalar. flex-direction: column dendiğinde eksenler yer değiştirir: justify-content dikeyde, align-items yatayda çalışır.¹⁵

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

flex: 1 bir öğenin kalan boşluğu paylaşmasını sağlar. Arka planda bu, başlangıç boyutunu (flex-basis), büyüme (flex-grow) ve küçülme (flex-shrink) oranını birlikte ayarlar.¹⁵

Grid

Grid, tek bir elementi satır ve sütunlara böler; çocuklar bu hücrelere yerleşir.¹⁶ fr birimi kalan boşluğu oranlı paylaştırır, repeat() ve minmax() sütun tanımını kısaltır.¹⁷

.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

Bu örnekte sütunlar en az 200px olur ve ekrana sığdığı kadar sütun açılır; media query yazmadan responsive bir kart listesi elde edilir. Sayfa iskeleti için grid-template-areas ile alanlara isim verilebilir; alanlar dikdörtgen olmak zorundadır.¹⁷

2022 verisine göre flexbox mobil sayfaların %74'ünde, grid ise %12'sinde kullanılıyordu.¹⁸

Responsive Tasarım

Responsive tasarım, sayfanın her ekran boyutunda düzgün görünmesi ve rahat kullanılmasıdır.¹⁹ Üç parçası vardır:

• Viewport meta etiketi: Mobil tarayıcının sayfayı küçültüp göstermesini engeller.²⁰

• Esnek düzen: Flexbox, grid ve göreli birimler.¹⁹

• Media query: Belirli bir genişlikten sonra stili değiştirir.¹⁹

<meta name="viewport" content="width=device-width, initial-scale=1" />

.layout {
  display: grid;
  gap: 1rem;
}

@media (width >= 768px) {
  .layout {
    grid-template-columns: 240px 1fr;
  }
}

Bu yaklaşıma mobile-first denir: önce dar ekran için tek sütun yazılır, ekran genişledikçe sütun eklenir.¹⁹ Breakpoint'leri popüler cihaz boyutlarına göre değil, içeriğin bozulmaya başladığı genişliğe göre seçin.²⁰

Custom Property

Custom property (CSS değişkeni), bir değeri bir kez tanımlayıp her yerde kullanmayı sağlar. Adı iki tire ile başlar, var() ile okunur.²¹

:root {
  --color-primary: #2563eb;
  --radius: 0.5rem;
}

.button {
  background: var(--color-primary);
  border-radius: var(--radius, 4px);
}

:root'ta tanımlanan değer tüm sayfada geçerli olur ve miras yoluyla çocuklara iner; bir bileşende yeniden tanımlanarak yalnızca orada değiştirilebilir.²¹ var()'ın ikinci değeri, değişken tanımlı değilse kullanılan yedektir.²² Tema ve dark mode gibi işlerin temeli budur.

Detaylı Öğrenmek İçin

• Baştan sona kurs: web.dev'in ücretsiz Learn CSS kursu; nesting, container queries ve anchor positioning gibi yeni konular da var.²³

• Responsive tasarım: web.dev'in Learn Responsive Design kursu.²⁴

• Alıştırmalı yol: MDN'in CSS styling basics modülü, ardından CSS layout modülü.²⁵

• Sağlam düzen alışkanlıkları: Ahmad Shadeed'in Defensive CSS ipuçları; uzun metin, bozulan görsel gibi beklenmedik içerikte kırılmayan düzen.²⁶

• Konuşma: Miriam Suzanne'ın cascade ve cascade layers konuşması (JSHeroes 2025).²⁷

• Konuşma: Jen Simmons'ın web'de sayfa düzeninin nasıl değiştiğini anlattığı konuşma (View Source 2018).²⁸