CSS Öğrenme Rehberi: Kural, Cascade, Kutu ve 49 Konuluk Yol Haritası

CSS nedir, neyi tanımlar?

CSS (Cascading Style Sheets), HTML ya da XML ile yazılmış bir belgenin nasıl sunulacağını tanımlayan bir stil sayfası dilidir. MDN, SVG, MathML ve XHTML gibi XML lehçelerini de bu kapsamda sayar. CSS yalnızca ekrandaki görünümü değil, belgenin kâğıda basıldığında, hatta sesli okunduğunda nasıl sunulacağını da tarif edebilir. Yani HTML içeriğin ne olduğunu, CSS ise o içeriğin nasıl görüneceğini söyler.

Sık duyulan "CSS3" ya da "CSS4" adlarına dair MDN'in açıklaması nettir: CSS 2.1'den sonra belirtim tek bir sürüm numarasıyla ilerlemeyi bıraktı. Konular modüllere ayrıldı ve her modül kendi düzey (level) numarasıyla gelişiyor; örneğin renkler için "CSS Color Module Level 5" gibi. Bu yüzden bir CSS3 ya da CSS4 sürümü olmayacak; bugün yazdığınız dilin adı yalnızca CSS'tir. W3C ise belirli aralıklarla belirtimin en güncel kararlı durumunun bir anlık görüntüsünü yayımlar.

CSS nasıl çalışır: kural, cascade ve kutu

1. Kural: seçici ve bildirim bloğu

CSS'in en küçük yapı taşı bildirimdir: bir özellik adı, iki nokta ve bir değer. Bildirimler süslü parantezlerle sınırlanan bir bildirim bloğunda toplanır ve noktalı virgülle ayrılır. Bloğun önüne virgülle ayrılmış bir veya daha fazla seçici yazdığınızda bir kural elde edersiniz. Tarayıcı, sayfadaki her öğe için hangi kuralların seçicisinin o öğeyle eşleştiğini bulur ve o kuralların bildirimlerini aday olarak toplar.

/* seçici listesi: h1 ve h2 */
h1,
h2 {
  color: navy;        /* bildirim 1 */
  font-weight: bold;  /* bildirim 2 */
}
/* sonuç: tüm h1 ve h2 başlıkları lacivert ve kalın görünür */

Kuralların yanında @ işaretiyle başlayan at-rule ifadeleri de vardır. @import başka bir stil dosyasını içeri alır, @media içindeki kuralları yalnızca belirli bir koşul doğruysa uygular, @font-face bir yazı tipi kaynağı tanımlar. Sözdiziminin ayrıntıları ve yorum yazımı CSS sözdizimi yazısında anlatılıyor.

2. Cascade: çakışmayı kim kazanır?

Bir öğeyle birden fazla kural eşleştiğinde aynı özellik için farklı değerler gelebilir. Hangisinin uygulanacağına cascade algoritması karar verir. MDN'e göre algoritma şu sırayla ilerler: önce o öğeye gerçekten uygulanabilen bildirimleri süzer (alaka), sonra bildirimleri kaynaklarına ve !important işaretine göre sıralar, eşitlik kalırsa seçicilerin özgüllüğüne bakar, ardından @scope yakınlığını değerlendirir ve en sonunda belgede en son yazılan bildirimi seçer.

• Kaynak (origin): tarayıcının varsayılan stilleri (user-agent), kullanıcının kendi stilleri ve sitenin yazarının stilleri ayrı kaynaklardır. Normal bildirimlerde yazar stilleri kazanır.
• Önem: !important ile işaretlenen bildirimlerde kaynak sırası tersine döner.
• Özgüllük: aynı kaynak ve katmandaki seçiciler ID, CLASS ve TYPE sütunlarıyla karşılaştırılır.
• Görünüm sırası: her şey eşitse sonra gelen bildirim kazanır.

Cascade'in bir de tamamlayıcısı vardır: kalıtım. Bir öğe için hiçbir bildirim bulunmadığında, kalıtılan özellikler (örneğin color) değerini ebeveynden alır; kalıtılmayan özellikler (örneğin border) başlangıç değerine döner. Bu iki konu cascade ve kalıtım ile özgüllük hesaplama yazılarında örneklerle açıklanıyor.

3. Kutu: her öğe bir dikdörtgendir

Tarayıcı belgeyi yerleştirirken her öğeyi standart CSS kutu modeline göre dikdörtgen bir kutu olarak temsil eder. Her kutunun dört alanı vardır: içerik, padding (iç boşluk), border (kenarlık) ve margin (dış boşluk). Bir öğenin genişliği, yanındaki öğeyle arasındaki mesafe ya da arka planın nereye kadar uzandığı bu dört alanın nasıl hesaplandığına bağlıdır. Flexbox ve grid gibi yerleşim araçları da sonuçta bu kutuları düzenler.

/* basit bir kart kutusu */
.kart {
  padding: 1rem;              /* içerik ile kenarlık arası */
  border: 1px solid gray;     /* kenarlık */
  margin: 2rem 0;             /* komşu kutularla arası */
}

Kutu modelinin ayrıntıları ve box-sizing ile genişlik hesabının nasıl değiştiği kutu modeli ve box-sizing yazılarında yer alıyor.

Hatalı CSS sayfayı bozmaz, sessizce yok sayılır

CSS'i JavaScript'ten ayıran önemli bir özellik de hata davranışıdır. Tarayıcı geçersiz bir bildirimle karşılaştığında hata mesajı göstermez; yalnızca o bildirimi atlar ve sonraki geçerli bildirimden devam eder. MDN bunu bir hata değil, dilin bilinçli bir özelliği olarak tanımlar: eski tarayıcılar yeni bir özelliği tanımasa bile sayfa çalışmaya devam eder. Öte yandan bu sessizlik, bir yazım hatasının neden etkisiz kaldığını anlamayı zorlaştırır. Neyin neden yok sayıldığını CSS çalışmıyor: sık hatalar yazısında adım adım ele alıyoruz.

Öğrenme yolu 1: Temeller

Bu aşama, sonraki her konunun üzerine kurulduğu dil kurallarını kapsar. Sırayla okumanızı öneririz.

• CSS sözdizimi: kural, bildirim ve yorum: bildirim, blok, kural ve at-rule kavramlarını, yorum yazımını ve stil dosyasının sayfaya nasıl bağlandığını anlatır.
• CSS seçiciler: tür, class, id ve attribute: öğeleri adına, sınıfına, kimliğine ve niteliklerine göre seçmeyi, seçici listelerini ve geçersiz seçicinin etkisini gösterir.
• CSS birleştiriciler: boşluk, >, + ve ~ ile öğeleri belge ağacındaki ilişkilerine göre seçmeyi öğretir.
• CSS cascade ve kalıtım: kaynak sırasını, !important etkisini, kalıtımı ve inherit, initial, unset, revert anahtar kelimelerini açıklar.
• CSS özgüllük hesaplama: seçici ağırlığının ID-CLASS-TYPE sütunlarıyla nasıl hesaplandığını örnek hesaplarla gösterir.
• CSS birimleri: px, em, rem, vw: uzunluk, yüzde ve sayı tiplerini, göreceli ve mutlak birimleri ve viewport birimlerini karşılaştırır.

Öğrenme yolu 2: Kutu ve akış

Öğelerin sayfada nasıl yer kapladığını ve normal akıştan nasıl çıkarıldığını bu bölümde öğrenirsiniz.

• CSS kutu modeli: margin, padding, border: içerik, padding, border ve margin alanlarını ve kısaltma (shorthand) yazımındaki değer sırasını anlatır.
• CSS box-sizing ve border-box: content-box ile border-box arasındaki farkı ve genişlik hesabını adım adım gösterir.
• CSS margin collapsing: dikey margin değerlerinin hangi durumlarda birleştiğini ve bunun nasıl önlenebileceğini açıklar.
• CSS display: block, inline, inline-block: display değerlerini, çoklu anahtar kelime sözdizimini, none ve contents davranışını inceler.
• CSS position: relative, absolute, fixed, sticky: konumlandırma türlerini, inset özelliklerini ve kapsayıcı bloğun (containing block) rolünü anlatır.
• CSS z-index ve stacking context: öğelerin üst üste dizilme sırasını ve yeni bir stacking context oluşturan durumları açıklar.
• CSS overflow: taşma ve kaydırma: içerik kutuya sığmadığında ne olacağını belirleyen overflow değerlerini ve text-overflow kullanımını gösterir.

Öğrenme yolu 3: Flexbox, grid ve hizalama

Modern sayfa yerleşiminin iki temel aracı flexbox ve grid'dir. Tek eksenli düzenler için flexbox, satır ve sütunlu düzenler için grid ile başlayın.

• CSS flexbox rehberi: flex kapsayıcı ve öğe kavramlarını, ana ve çapraz ekseni, flex-direction, flex-wrap ve order özelliklerini tanıtır.
• Flexbox hizalama: justify-content ve align-items: flex öğelerini iki eksende hizalamayı ve gap ile aralık vermeyi anlatır.
• flex-grow, flex-shrink ve flex-basis: boş alanın flex öğeleri arasında nasıl paylaştırıldığını ve flex kısaltmasını açıklar.
• CSS grid rehberi: grid kavramlarını, grid-template-columns, fr birimi, repeat() ve gap kullanımını öğretir.
• grid-template-areas ve çizgi tabanlı yerleşim: öğeleri adlandırılmış alanlara ve çizgi numaralarına göre yerleştirmeyi gösterir.
• auto-fill, auto-fit ve minmax(): otomatik yerleşimi, esnek sütun sayısını ve subgrid kavramını kısaca anlatır.

Öğrenme yolu 4: Renk, arka plan ve yazı tipi

Görsel kimliği oluşturan renkler, arka planlar, kenarlar ve yazı tipleri bu bölümde toplanıyor.

• CSS renk değerleri: hex, rgb, hsl, oklch: adlandırılmış renklerden oklch() fonksiyonuna kadar renk yazım biçimlerini ve saydamlığı karşılaştırır.
• color-mix() ve göreceli renkler: iki rengi karıştırmayı ve mevcut bir renkten yeni renk türetmeyi anlatır.
• CSS background özellikleri: arka plan rengi, görseli, boyutu, konumu ve tekrarını, çoklu arka planları gösterir.
• CSS gradient: linear, radial, conic: renk geçişlerini, renk duraklarını ve tekrar eden gradyanları açıklar.
• border-radius ve box-shadow: kenarlık, yuvarlatılmış köşe ve gölge yazımını, outline ile farkını anlatır.
• @font-face ve yazı tipi özellikleri: yazı tipi ailesi, boyut, kalınlık, satır yüksekliği ve web fontu yüklemeyi öğretir.

Öğrenme yolu 5: Metin, değişkenler ve fonksiyonlar

Bu aşamada metin kaydırma kurallarını, yeniden kullanılabilir değişkenleri, hesaplama fonksiyonlarını ve ileri seçicileri öğrenirsiniz.

• Metin kaydırma: white-space ve overflow-wrap: uzun kelimelerin ve boşlukların nasıl satıra bölündüğünü, text-wrap değerlerini anlatır.
• CSS değişkenleri ve var(): özel özellik tanımlamayı, yedek değer vermeyi ve geçersiz değerlerin davranışını açıklar.
• calc(), min(), max() ve clamp(): farklı birimleri tek bir ifadede hesaplamayı ve sınırlı esnek değerler üretmeyi gösterir.
• Pseudo-class: :hover, :focus, :nth-child(): öğeleri durumlarına ve belge ağacındaki sıralarına göre seçmeyi öğretir.
• Pseudo-element: ::before ve ::after: content ile içerik eklemeyi ve ilk satır, ilk harf, liste işareti gibi parçaları biçimlendirmeyi anlatır.
• :has(), :is(), :where() ve :not(): ilişkisel ve mantıksal seçicilerle daha kısa ve esnek kurallar yazmayı gösterir.

Öğrenme yolu 6: Hareket ve efektler

Geçişler, animasyonlar ve dönüşümler arayüze hareket katar. Kullanıcının hareket tercihlerine saygı göstermeyi de bu bölümde bulacaksınız.

• CSS transition geçiş efektleri: bir özelliğin değeri değiştiğinde bu değişimin zamana yayılmasını ve @starting-style kullanımını anlatır.
• CSS animation ve @keyframes: ara adımları tanımlanmış animasyonları, tekrar sayısını ve animation-fill-mode davranışını açıklar.
• transform: translate, rotate, scale: öğeleri taşımayı, döndürmeyi ve ölçeklemeyi, transform-origin etkisini gösterir.
• filter ve backdrop-filter: bulanıklık, parlaklık gibi görsel filtreleri ve öğenin arkasındaki alana uygulanan filtreleri anlatır.
• Scroll-driven animations: animasyonları zaman yerine kaydırma ilerlemesine bağlamayı açıklar.
• View transitions: sayfa veya durum değişimleri arasında görünüm geçişleri tanımlamayı anlatır.

Öğrenme yolu 7: Koşullu kurallar ve mimari

Büyüyen stil dosyalarını düzenli tutmak ve kuralları koşullara bağlamak için bu bölümdeki araçlara ihtiyaç duyarsınız.

• @media sözdizimi ve özellikleri: medya sorgusu yazımını, aralık sözdizimini ve baskı stillerini anlatır.
• Container queries: bir bileşeni ekran yerine kapsayıcısının boyutuna göre biçimlendirmeyi gösterir.
• @supports özellik sorguları: tarayıcının bir özelliği destekleyip desteklemediğine göre kural uygulamayı açıklar.
• Dark mode ve prefers-color-scheme: kullanıcının açık veya koyu tema tercihine uyum sağlamayı ve light-dark() fonksiyonunu anlatır.
• @layer cascade katmanları: stilleri katmanlara ayırarak öncelik sırasını özgüllükten bağımsız yönetmeyi öğretir.
• CSS nesting: kuralları iç içe yazmayı, & seçicisini ve iç içe yazımın özgüllüğe etkisini açıklar.

Öğrenme yolu 8: Yeni özellikler, pratik desenler ve sık hatalar

Son aşama, daha yeni eklenen özellikleri ve günlük işte en sık karşılaşılan sorunları bir araya getirir.

• @scope ile kapsamlı stil: stilleri belge ağacının belirli bir bölümüyle sınırlamayı ve yakınlık kuralını anlatır.
• CSS anchor positioning: bir öğeyi sayfadaki başka bir öğeye bağlı olarak konumlandırmayı gösterir.
• @property ile kayıtlı özel özellikler: özel özelliklere tip, kalıtım ve başlangıç değeri tanımlamayı açıklar.
• if() ve @function: CSS içinde koşullu değerler ve kendi fonksiyonlarınızı tanımlamayı anlatır.
• CSS ile ortalama yöntemleri: bir öğeyi yatayda ve dikeyde ortalamanın flex, grid ve margin tabanlı yollarını karşılaştırır.
• CSS çalışmıyor: sık hatalar ve hata ayıklama: bir kuralın neden etkisiz kaldığını teşhis etmeyi adım adım gösterir.

Seri dışında kalan konular

Bu seri CSS dilinin kendisine odaklanır. Duyarlı (responsive) tasarım kavramı, viewport meta etiketi ve kırılma noktası seçimi mobil uyumluluk nedir yazısında, sayfa hızı ve düzen kayması Core Web Vitals yazısında anlatılıyor. Utility sınıflarıyla çalışan bir çerçeve arıyorsanız Tailwind CSS rehberi yazısına bakabilirsiniz. Sass, Bootstrap ve PostCSS bu serinin kapsamı dışında kalıyor. WordPress temalarındaki style.css başlık bloğu ise WordPress tema style.css yazısının konusudur.

CSS'i denemek için ayrı bir araç kurmanız gerekmez. Bir HTML dosyası ve onun içinden bağlanan bir .css dosyası yeterlidir; dosyayı tarayıcıda açıp geliştirici araçlarındaki stil panelinden hangi kuralın uygulandığını, hangisinin üstünün çizildiğini görebilirsiniz. Üstü çizili bildirim genellikle cascade'de kaybeden ya da geçersiz sayılan bir bildirimin işaretidir; bu panel, öğrendiğiniz kuralları canlı olarak gözlemlemenin en kolay yoludur.

<!-- index.html içinde, head bölümünde -->
<link rel="stylesheet" href="style.css" />

Sık Sorulan Sorular

CSS3 ve CSS4 diye bir sürüm var mı?

Hayır. MDN'e göre CSS 2.1'den sonra belirtim modüllere ayrıldı ve her modül kendi düzey numarasıyla ilerliyor. CSS3 ya da CSS4 adında bir sürüm olmayacak; dilin adı bugün yalnızca CSS'tir.

CSS öğrenmek için JavaScript bilmem gerekir mi?

Gerekmez. CSS ayrı bir dildir ve bu serideki örneklerin tamamı JavaScript olmadan çalışır. Etkileşimli arayüzlere geçtiğinizde JavaScript öğrenme rehberi size yol gösterebilir.

Hangi sırayla çalışmalıyım?

Önce temeller (sözdizimi, seçiciler, cascade, özgüllük, birimler), ardından kutu modeli ve akış, sonra flexbox ve grid. Renk, yazı tipi ve efektler bu temel oturduktan sonra çok daha hızlı öğrenilir.

Yazdığım CSS neden hiçbir hata vermeden çalışmıyor?

Çünkü tarayıcılar geçersiz bildirimleri sessizce yok sayar. En sık nedenler yazım hatası, eksik noktalı virgül, geçersiz bir seçici ve daha özgül başka bir kuraldır. Ayrıntılar için sık hatalar yazısına bakın.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: CSS sözdizimi · Cascade ve kalıtım · Kutu modeli · Flexbox rehberi · HTML sayfa oluşturma