CSS temelleri: renk, yazı, kutu modeli

Ders 19'da sayfanın iskeletini kurdun, ama tarayıcıda eski bir belge gibi görünüyordu: beyaz zemin, Times New Roman yazı, mavi bağlantılar. Bu derste o iskelete görünüm vereceksin: renkleri, yazıları ve boşlukları ayarlayacak, bir kutunun ekranda kaç piksel tutacağını hesaplayacak ve "yazdığım kural neden çalışmıyor?" sorusunu geliştirici araçlarıyla kendin cevaplayacaksın. Sonunda elinde, sıfırdan boyadığın bir şampiyon kartı olacak.

#CSS ne işe yarar?

HTML bir şeyin ne olduğunu söyler: bu bir başlık, bu bir düğme. Nasıl görüneceğini söylemez; o iş CSS'indir (Cascading Style Sheets, "basamaklı stil sayfaları"). Aşağıdaki kartta tek satır CSS yok; gördüğün her şey tarayıcının varsayılan stilleri.

Tarayıcı her sayfaya kendiliğinden birkaç kural uygular: gövdenin kenarlarında 8 piksel boşluk, 16 piksellik Times New Roman, 32 piksellik kalın h1, maddelerde 40 piksel girinti. Senin CSS'in bu varsayılanların üstüne yazılır. Aynı kart, bu derste yazacağın CSS ile:

İki penceredeki <body> harfi harfine aynı; farkı yaratan, <head>'e eklenen birkaç <link> satırı ve 51 satırlık bir CSS dosyası. Dersin sonunda o dosyanın her satırını kendin yazmış olacaksın. Düğmenin üstüne fareyle gelmeyi de dene.

#CSS'i sayfaya bağlamak

#Proje klasörü

C:\kod içinde sampiyon-karti adında yeni bir klasör oluştur, VS Code'da File → Open Folder ile aç ve içinde iki dosya oluştur: index.html ve stil.css. index.html'e aşağıdakini yaz. Ders 19'daki iskeletten farkı 7. satır ve etiketlerdeki class ile id nitelikleri; ikisinin ne işe yaradığını seçiciler bölümünde göreceksin.

1<!doctype html>2<html lang="tr">3<head>4    <meta charset="utf-8">5    <meta name="viewport" content="width=device-width, initial-scale=1">6    <title>Ahri kartı</title>7    <link rel="stylesheet" href="stil.css">8</head>9<body>10    <main>11        <article class="kart" id="ahri">12            <h1 class="ad">Ahri</h1>13            <p class="rol">Büyücü · Orta koridor</p>14            <p>Dokuz kuyruklu bir tilki. Hızlı, çevik ve tehlikeli.</p>15            <ul class="degerler">16                <li>Can: 590</li>17                <li>Mana: 418</li>18                <li>Hareket hızı: 330</li>19            </ul>20            <button class="dugme">Şampiyonu seç</button>21        </article>22    </main>23</body>24</html>

Vurgulu <link> satırı sayfaya dışarıdan bir dosya bağlar:

• rel="stylesheet": bağlanan dosya "bir stil sayfası" (relationship, ilişki).
• href="stil.css": dosyanın yolu. Ders 19'daki göreli yol kuralı geçerli: yol index.html'in klasörüne göre okunur. Dosya css adlı bir alt klasörde olsaydı css/stil.css yazardın.

<link>'in kapanış etiketi yoktur, tıpkı <img> gibi. <head>'e konur, çünkü tarayıcı sayfayı çizmeden önce stili bilmek ister. Şimdi stil.css'e ilk kuralını yaz:

1body {2    background-color: #0a1428;3    color: #f0e6d2;4}

Kaydet ve sayfayı yerel sunucuyla aç (Live Server'da Go Live, ya da npx serve). Zemin lacivert, yazılar krem rengiyse bağlantı çalışıyor. Sayfa beyaz kaldıysa sık hatalar bölümüne bak.

#Tarayıcı CSS'i nasıl alır?

CSS dosyası sayfanın içinde değil, ayrı bir dosyadır; tarayıcı onu Ders 18'de gördüğün türden ayrı bir istekle alır.

Sonuç: href'teki yol yanlışsa HTML yine gelir ama CSS gelmez. Sayfa stilsiz açılır ve hiçbir hata penceresi çıkmaz.

#Üç yol: <link>, <style>, style

<!-- 1. Ayrı dosya: <head> içine tek satır --><link rel="stylesheet" href="stil.css"> <!-- 2. Aynı sayfada: <head> içinde <style> etiketi --><style>    body {        background-color: #0a1428;    }</style> <!-- 3. Tek bir öğenin üstünde: style niteliği --><p style="color: gold;">Bu paragraf altın sarısı</p>

Neden hep ayrı dosya? On sayfalık bir sitede hepsi aynı stil.css'i bağlar; başlık rengini tek satırda değiştirirsin (Ders 3'teki kendini tekrar etme ilkesi). Tarayıcı dosyayı bir kez indirir, sonraki sayfalarda deposundaki kopyayı, yani önbelleği kullanır. HTML içerikle, CSS görünümle uğraşır; Ders 17'de kodu modüllere bölmenle aynı düşünce.

style niteliği ise kuralı tek bir öğenin içine gömer: aynı görünüm için satırı her öğeye kopyalarsın ve değiştirirken hepsini tek tek ararsın.

#Bir CSS kuralının parçaları

Bir CSS dosyası kurallardan oluşur. Her kural iki parçadır: seçici (kime?) ve süslü parantezin içindeki bildirimler (ne yapılsın?).

Şekildeki kural: "kart sınıfındaki her öğenin yazısı beyaz olsun, içinde 24 piksel boşluk olsun."

Yazım kuralları:

• Özellik adları İngilizcedir, sözcükleri tireyle ayrılır: background-color. JavaScript'teki camelCase (backgroundColor) burada çalışmaz.
• Her bildirim ; ile biter. Sondakinde zorunlu değil ama hep koy; altına satır ekleyince unutmuş olmazsın.
• Birim sayıya bitişik yazılır: 24px doğru, 24 px yanlış.
• Girinti ve satır sonları tarayıcı için önemsizdir; yine de her bildirimi ayrı satıra, 4 boşluk girintiyle yaz. Seçicinin içindeki boşluk ise anlam taşır; seçicilerde göreceksin.
• Yorum /* ... */ ile yazılır. JavaScript'teki // CSS'te yorum değildir (sık hatalarda göreceksin).

/* Kartın genel görünümü */.kart {    color: white;    padding: 24px;}

#Seçiciler: kural kime uygulanacak?

Seçici, kuralın sayfadaki hangi öğelere uygulanacağını söyler. Temel seçicileri kartın HTML'i üstünde görelim.

#Etiket seçicisi

Etiketin adını yazarsın, o etiketteki bütün öğeler seçilir:

p {    color: dimgray;}

Karttaki iki paragraf da gri olur. Çoğu zaman daha seçici olman gerekir.

#Sınıf seçicisi

HTML'de bir öğeye class niteliğiyle bir grup adı takarsın, CSS'te adın başına nokta koyarak seçersin:

<p class="rol">Büyücü · Orta koridor</p>

.rol {    font-weight: bold;}

• Aynı sınıfı istediğin kadar öğeye verebilirsin; hepsi aynı görünür.
• Bir öğeye boşlukla ayırarak birden çok sınıf verebilirsin: class="dugme ana" öğesine hem .dugme hem .ana uygulanır.
• Sınıf adlarını küçük ve İngilizce harflerle yaz, sözcükleri tireyle ayır: ana-dugme.

#Kimlik seçicisi

id niteliği bir öğeye sayfada tek olan bir ad, yani kimlik verir (Ders 19'da <label for="…"> ile kullandın). CSS'te başına # koyarsın:

#ahri {    background-color: aliceblue;}

Aynı id sayfada bir kez kullanılabildiği için #ahri kuralını ikinci bir karta veremezsin; özgüllükte göreceğin bir sebep daha var. Kural: stil için sınıf kullan, id'yi sayfa içi bağlantılara ve Ders 22'deki JavaScript'e sakla. Örneğin kutu modeli bağlantısı, bu sayfadaki o id'li başlığa gider.

#Seçicileri birleştirmek

Seçicileri üç yolla birleştirebilirsin; aradaki işaret anlamı değiştirir:

Kartta ilki başlığı ve rol satırını, ikincisi yalnız rol satırını (rol sınıflı bir span olsaydı onu almazdı), üçüncüsü üç değer satırını seçer.

Boşluklu yazımı anlamak için HTML'i bir soy ağacı gibi düşün. Bir öğeyi saran öğe onun ebeveyni, hemen içindekiler çocukları, çocukların içindekiler de torunlarıdır. Kartta ul, li'lerin ebeveyni; li'ler ul'un çocukları ve kartın torunları.

Boşluk "herhangi bir derinlikte içinde" demek: çocuk da olur, torun da. li kartın çocuğu değil torunu, arada ul olması fark etmez. Bu yüzden boşluklu yazıma torun seçicisi (descendant selector) denir.

Bitişik yazım p.rol ise bir birleşik seçicidir (compound selector): iki koşul aynı öğede aranır. Dikkat: .kart, li "kart ve bütün li'ler", li.kart ise "kart sınıflı li" demek. Yazımları benzer, anlamları çok farklı.

Hepsini birlikte dene: deneme.html'in <style>'ına aşağıdaki CSS'i, <body>'sine kartın <article> bölümünü yaz.

p {    color: dimgray;} .rol {    font-weight: bold;} #ahri {    background-color: aliceblue;} .kart li {    color: darkgreen;}

Rol satırı p'den gri rengi, .rol'dan kalınlığı aldı: çakışmayan bildirimler toplanır. Çakışınca ne olacağını "Hangi kural kazanır?" bölümünde göreceksin.

#:hover: fare üstündeyken

Bazı seçiciler öğenin bir durumunu seçer. En çok kullanılanı :hover: "fare bu öğenin üstündeyken".

.dugme {    background-color: royalblue;    color: white;} .dugme:hover {    background-color: midnightblue;    cursor: pointer;}

<button class="dugme">Şampiyonu seç</button>

İki nokta seçiciye bitişik yazılır. Boşluklu .dugme :hover bambaşka bir şey seçer: ".dugme'nin içinde, fare üstündeki herhangi bir öğe". Düğmenin içinde başka öğe olmadığı için hiçbir şey değişmez. cursor: pointer imleci el işaretine çevirip "buraya tıklanır" der.

#Renkler

Renk alan özellikler: color (yazı), background-color (zemin) ve kutu modelinde göreceğin border (kenarlık). Rengi dört yazımla verebilirsin; aşağıdaki dördü de aynı rengi verir:

Tarayıcı dördünü de aynı biçimde saklar: geliştirici araçlarının Computed sekmesinde hepsi rgb(102, 51, 153) görünür. Nasıl okunduklarına sırayla bakalım:

• Ad: rebeccapurple, gold, teal, crimson gibi hazır adlar; CSS'te 150 kadar var. Hızlı denemeler için iyidir, ama seçenek azdır.
• Hex: Ekrandaki her nokta kırmızı, yeşil ve mavi ışığın karışımıdır. Hex, üç ışığın gücünü ikişer onaltılık haneyle verir: 0–9'dan sonra a (10) … f (15) gelir, 00 0, ff 255 demektir. Tablodaki #663399'un çiftleri, yani 66, 33 ve 99, onluk sayıyla 102, 51 ve 153: rgb satırındaki sayıların aynısı. #000000 siyah, #ffffff beyaz, #ff0000 kırmızı. Çiftler aynı hanelerdense kısalır: #639, #fff. Tasarım programları renkleri çoğunlukla hex verir.
• rgb: Aynı üç ışık (kırmızı, yeşil, mavi), 0–255 arası onluk sayılarla. Eski kodlarda virgüllüsünü görürsün, rgb(102, 51, 153); o da geçerli. Eğik çizgiyle saydamlık eklenir: rgb(0 0 0 / 50%) yarı saydam siyah.
• hsl: İnsan için en kolayı. Ton renk çemberindeki açıdır (0 kırmızı, 120 yeşil, 240 mavi); doygunluk 0% gri, 100% en canlı; açıklık 0% siyah, 50% rengin kendisi, 100% beyaz.

hsl'in kolaylığı: aynı rengin açık ya da koyu tonunu yalnızca son sayıyı değiştirerek üretirsin. Düğmenin :hover rengini böyle seçeceğiz.

#Okunabilirlik: kontrast

Yazı ile zemin arasındaki fark yetmezse metin okunmaz. Kabul gören ölçü (WCAG) normal yazı için en az 4,5'e 1 kontrast oranı.

Ölçmek için geliştirici araçlarında bir color değerinin yanındaki renk karesine tıkla: renk seçicideki Contrast ratio (Türkçe arayüzde Kontrast oranı) bölümü oranı ve yeterli olup olmadığını gösterir. Krem yazımız lacivert zeminde 14,8'e 1, kartın koyu gri zemininde 12,8'e 1; gray ise beyaz zeminde 3,9'da kalır. Bu yüzden örneklerde gri için daha koyu dimgray'i (5,5'e 1) kullanıyoruz.

#Yazı: yazı tipi, boyut, satır yüksekliği

#Yazı tipi listesi

stil.css'teki body kuralına bir satır ekle:

1body {2    background-color: #0a1428;3    color: #f0e6d2;4    font-family: "Segoe UI", Arial, sans-serif;5}

Yazı tipi ziyaretçinin bilgisayarında kurulu olmalı: Segoe UI Windows'ta var, Mac'te ve Android'de yok. Bu yüzden font-family'ye virgülle ayrılmış bir liste verirsin; tarayıcı soldan başlayıp bulduğu ilkini kullanır (Windows'ta Segoe UI, Mac'te Arial). Listenin sonuna hep bir genel aile koy; hiçbiri bulunamazsa tarayıcı o aileden kendi yazı tipini seçer:

Adında boşluk olan yazı tiplerini tırnağa al: "Segoe UI". Genel aileler ise tırnaksız yazılır: "sans-serif" yazarsan tarayıcı onu "adı sans-serif olan bir yazı tipi" sanar; listede başka bir yazı tipi de bulunamazsa Chrome'da Times New Roman'a düşersin.

#Google Fonts: herkeste aynı yazı tipi

Ziyaretçide olmayan bir yazı tipini kullanmak için onu sayfanla birlikte göndermen gerekir. En kolay yol Google'ın ücretsiz servisi Google Fonts:

3<head>4    <meta charset="utf-8">5    <meta name="viewport" content="width=device-width, initial-scale=1">6    <title>Ahri kartı</title>7    <link rel="preconnect" href="https://fonts.googleapis.com">8    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>9    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@700&display=swap" rel="stylesheet">10    <link rel="stylesheet" href="stil.css">11</head>

1.ad {2    font-family: "Cinzel", serif;3}

İlk iki <link> "şu sunuculara şimdiden bağlan" der, yazı tipi daha çabuk gelir. Üçüncüsü yazı tipinin CSS dosyasıdır: wght@700 "700 kalınlığını ver", display=swap "yazı tipi gelene kadar metni yedekle göster" demek. Google Fonts'un verdiği satırda wght@400..900 gibi bir aralık görebilirsin; o, bütün kalınlıkları getirir. Biz yalnızca kullanacağımız 700'ü istedik; ikisi de çalışır.

İnternet yoksa ya da adres yanlışsa sayfa bozulmaz, yalnızca yedek yazı tipiyle görünür; listenin işi bu.

#Boyut, kalınlık, satır yüksekliği

stil.css'e devam et:

1body {2    background-color: #0a1428;3    color: #f0e6d2;4    font-family: "Segoe UI", Arial, sans-serif;5    line-height: 1.6;6}7 8.ad {9    font-family: "Cinzel", serif;10    font-size: 32px;11}12 13.rol {14    font-size: 14px;15    text-transform: uppercase;16}

• font-size: yazının boyu, varsayılanı 16 piksel. Birimler bölümünde px'ten daha iyi bir birim göreceğiz.
• font-weight: kalınlık; 400 normal, 700 (ya da bold) kalın. h1 zaten kalın. Yazı tipinde o kalınlık yoksa tarayıcı en yakın kalınlığı kullanır ya da harfleri kendisi kalınlaştırır ve yazı kaba görünür; Google Fonts'tan 700'ü istememizin sebebi bu.
• line-height: satırların arası. Birimsiz yaz: 1.6 "yazı boyunun 1,6 katı" demek; 16 piksellik yazıda 25,6, 32 piksellik başlıkta kendiliğinden 51,2 piksel olur. Okuma metinlerinde 1,5–1,7 rahattır.
• text-transform: uppercase: yazıyı ekranda büyük harfe çevirir; HTML'deki metin değişmez. text-align (left, center, right) ise satırları hizalar.

#Kutu modeli: her öğe bir kutudur

Tarayıcı her öğeyi dikdörtgen bir kutu olarak çizer: başlık, paragraf, düğme. Kutunun boyutu ve komşularıyla arası dört katmanla belirlenir. Katmanları karıştırırsan yazı kenara yapışır, kartlar birbirine değer ve "240 yazdım, neden 288 oldu?" diye düşünürsün.

İçeriden dışarıya:

1. İçerik (content): yazı ya da resim. width normalde yalnızca bunun genişliğidir.
2. Padding (iç boşluk): içerikle kenarlık arası; zemin rengi buraya da yayılır.
3. Border (kenarlık): kutunun çizgisi.
4. Margin (dış boşluk): kenarlığın dışında, komşulara olan boşluk; her zaman saydamdır.

#Genişliği hesaplamak

.kutu {    width: 240px;    padding: 20px;    border: 4px solid goldenrod;    margin: 16px;}

Bu kutu ekranda kaç piksel? 240 değil. Tarayıcı width'i yalnızca içeriğe uygular, padding ve kenarlığı iki yandan üstüne ekler: 4 + 20 + 240 + 20 + 4 = 288 piksel. Margin bu toplama girmez; kutunun etrafındaki boşluktur (onunla birlikte kapladığı yer 320 piksel).

#Kısa yazımlar

margin da böyle yazılır. Kenarlık üç parçalıdır: border: 4px solid goldenrod → kalınlık, çizgi türü (solid düz, dashed kesik, dotted noktalı), renk. border-radius: 12px köşeleri yuvarlar.

#box-sizing: border-box

Her kutuda toplama yapmak yorucu ve hataya açık. box-sizing: border-box yazınca width kenarlık dahil bütün kutunun genişliği olur; padding ve kenarlık içeriden düşülür. Örnekteki <div>, Ders 19'da semantik etiketlerin yanında adını duyduğun anlamsız genel kutu: article gibi bir şey anlatmaz, yalnızca stil vermek için kullanılır.

.kutu {    width: 240px;    padding: 20px;    border: 4px solid goldenrod;    margin-bottom: 16px;} .ic-dahil {    box-sizing: border-box;}

<div class="kutu">Varsayılan: ekranda 288 piksel</div><div class="kutu ic-dahil">border-box: ekranda 240 piksel</div>

İkinci kutuda içerik 240 − 2 × 20 − 2 × 4 = 192 piksele indi, ama kutunun tamamı yazdığın gibi 240. Bu yüzden hemen her projenin CSS'i şu kuralla başlar:

1* {2    box-sizing: border-box;3}

* evrensel seçicidir: bütün öğeleri seçer. Bu kuralı stil.css'in en üstüne yaz.

#Kartın kutusu

Şimdi kartın kendisi. stil.css'e ekle:

1.kart {2    max-width: 320px;3    margin: 0 auto;4    padding: 24px;5    background-color: #1e2328;6    border: 2px solid #c8aa6e;7    border-radius: 12px;8}

• max-width: 320px: "en fazla 320 piksel". Geniş ekranda 320 olur, dar ekranda sığacak kadar daralır; width yazsaydın taşardı.
• margin: 0 auto: üst ve alt 0, sağ ve sol auto, yani "kalan boşluğu iki yana eşit paylaştır": kart ortaya gelir. Bunun için kartın sayfadan dar olması gerekir; max-width bunu sağlar.

#Kutuyu geliştirici araçlarında görmek

Görüntüdeki kart dersin sonundaki hâliyle çekildi (gövdenin iki yanında 16'şar piksel iç boşluk var); senin sayfanda sayılar pencerenin genişliğine göre farklı çıkar. İki yandaki turuncu alanlar margin: 0 auto'nun bıraktığı boşluk: 480 piksellik pencerede gövdenin iç boşluklarından sonra kalan 448 pikselin 320'sini kart alıyor, artan 128 iki yana 64'er paylaşılıyor.

Kutucuktaki 320 × 351.14 kutunun kenarlık dahil boyutu; kutucuk hep bunu gösterir. border-box kullandığımız için bu genişlik, max-width'e yazdığın 320'nin ta kendisi.

#Birimler: px, rem, %, vw, vh

Şu ana kadar hep px yazdın. Öbür birimler başka bir şeye göre ölçer:

#rem: kullanıcının ayarına saygı

rem (root em), kök öğenin, yani <html>'in yazı boyudur. Varsayılanı 16 piksel: 1rem 16, 1.5rem 24, 0.875rem 14 piksel. Hesap için 16'ya böl: 32 piksel = 2rem.

Neden uğraşalım? Görme güçlüğü olan biri Chrome'da Ayarlar → Görünüm → Yazı tipi boyutu'nu Büyük yapınca kök yazı 16'dan 20 piksele çıkar. rem ile yazdıkların onunla büyür, px ile yazdıkların yerinde sayar. (Sayfayı yakınlaştırmak, yani Ctrl basılıyken fare tekerleğini çevirmek, ikisini de büyütür; fark bu ayarda çıkar.) Ayarın yeri Chrome sürümüne göre biraz değişmiş olabilir; bulamazsan ayarlarda "yazı tipi boyutu" diye ara.

Kartı rem'e çevir; bu arada gövdenin 8 piksellik varsayılan margin'ini sıfırlayıp yerine rem cinsinden padding ver:

1body {2    margin: 0;3    padding: 2rem 1rem;4    background-color: #0a1428;5    color: #f0e6d2;6    font-family: "Segoe UI", Arial, sans-serif;7    line-height: 1.6;8}9 10.kart {11    max-width: 320px;12    margin: 0 auto;13    padding: 1.5rem;14    background-color: #1e2328;15    border: 2px solid #c8aa6e;16    border-radius: 12px;17}18 19.ad {20    font-family: "Cinzel", serif;21    font-size: 2rem;22}23 24.rol {25    font-size: 0.875rem;26    text-transform: uppercase;27}

Kenarlık (2px) ve köşe (12px) px kalabilir; yazı büyüdü diye çizgi kalınlaşmasın. max-width de şimdilik px kalsın; mobil uyum Ders 21'de.

#%: ebeveyne göre

width: 50% "ebeveynimin içerik genişliğinin yarısı": 400 piksellik kutunun içinde 200 piksel. Kartın düğmesine width: 100% vereceğiz, kartın içini boydan boya doldursun. Yüzdenin neye göre ölçtüğü özelliğe bağlıdır: width, padding ve margin'de ebeveynin genişliği, font-size'da ebeveynin yazı boyu (font-size: 50% ebeveyninin yazısının yarısı).

#vw ve vh: pencereye göre

50vw pencere genişliğinin yarısı, 100vh pencerenin tam yüksekliğidir; pencereyle birlikte değişirler.

.cubuk {    background-color: teal;    color: white;    margin-bottom: 8px;} .sabit {    width: 200px;} .yuzde {    width: 50%;} .pencere {    width: 50vw;}

<div class="cubuk sabit">200px</div><div class="cubuk yuzde">50%</div><div class="cubuk pencere">50vw</div>

Önizleme penceresi küçük bir tarayıcıdır; vw onun genişliğine göre hesaplanır. 50% çubuğu biraz kısa, çünkü yüzde gövdenin içine (gövdenin iki yandaki 8 piksellik margin'inin arasına), vw ise pencerenin tamamına göre ölçer. Tarayıcını daraltıp genişlet: ilk çubuk yerinde durur, diğer ikisi değişir.

#Hangi kural kazanır? Kalıtım, özgüllük ve sıra

Bir öğeye birden çok kural uygulanabilir. Biri color: dimgray, öbürü color: crimson derse ne olur? Tarayıcı bunu her seferinde aynı kurallarla çözer; CSS'in adındaki cascading (basamaklı) bu kurallar zincirinin adıdır.

#Kalıtım: ebeveynden çocuğa geçenler

body'ye color yazınca kartın içindeki bütün yazılar krem rengi oldu, çünkü yazıyla ilgili özellikler (color, font-family, font-size, font-weight, line-height, text-align, text-transform) ebeveynden çocuğa kalıtımla geçer. Kutuyla ilgili olanlar (background-color, border, padding, margin, width) geçmez; yoksa kartın kenarlığı içindeki her paragrafa da çizilirdi.

.kart {    color: teal;    font-family: Georgia, serif;    border: 2px solid goldenrod;    padding: 8px;}

<div class="kart">    <p>Bu paragraf rengi ve yazı tipini karttan aldı, kenarlığını almadı.</p></div>

İki istisna seni bir gün mutlaka şaşırtacak:

• Bağlantılar mavi kalır. Tarayıcının varsayılan stillerinde a için doğrudan bir renk kuralı var ve öğeye yazılmış her kural kalıtımla gelen değeri yener. Çözüm: .kart a { color: inherit; }. inherit "bu özelliği ebeveyninden al" demek.
• Form öğeleri yazı tipini almaz. button, input, select ve textarea'ya tarayıcı kendi yazı tipini verir (Windows'ta Chrome'da 13,33 piksellik Arial; textarea'da Arial yerine eş aralıklı bir yazı tipi). Düğmen küçük ve farklı görünüyorsa sebep bu; çözüm font: inherit;.

body {    color: teal;    font-family: Georgia, serif;    font-size: 20px;} .duzgun {    font: inherit;    color: inherit;}

<p>Gövde metni. <a href="#">Bu bağlantı</a> mavi kaldı.</p><button>Varsayılan düğme</button><button class="duzgun">inherit ile düğme</button>

#Özgüllük: hangi seçici daha özel?

İki kural aynı öğeye aynı özelliği farklı değerle veriyor:

.kart p {    color: dimgray;} .rol {    color: crimson;}

<article class="kart">    <p class="rol">Büyücü · Orta koridor</p>    <p>Dokuz kuyruklu bir tilki.</p></article>

.rol sonra yazıldığı hâlde rol satırı gri kaldı: tarayıcı önce sıraya değil özgüllüğe bakar ve .kart p, .rol'dan daha özeldir.

Özgüllük üç sütunlu bir puandır; seçicinin parçalarını sayarsın: ID sütununa # ile başlayanlar, Sınıf sütununa .kart gibi noktalı sınıflar ve :hover gibi sözde sınıflar, Etiket sütununa p, li gibi etiket adları. * ve boşluk puan eklemez; virgülle ayrılmış seçicilerin her biri ayrı puanlanır. Puanı bu sırayla, aralarına tire koyarak yazacağız: ID-sınıf-etiket.

Puanlar soldan sağa, sütun sütun karşılaştırılır:

Rol satırını kırmızı yapmak için ya .rol'u güçlendirirsin (.kart .rol, 0-2-0, .kart p'yi yener) ya da bütün paragrafları boyayan .kart p'ye gerçekten gerek var mı diye düşünürsün. Çoğu zaman ikincisi daha temizdir.

#style niteliği ve !important

style niteliğine yazılan bildirim bütün seçicileri yener. Sonuna !important eklenen bildirim (color: red !important;) özgüllüğe bakmaz, style'ı bile yener.

İkisinden de uzak dur: bir kuralı yenemiyorsan çözüm büyük silah değil, sade seçicilerdir. Stil için sınıf kullan, CSS'te ID kullanma. !important dolu bir projede CSS çoktan kontrolden çıkmıştır.

#Sıra: eşitlikte sonra yazılan kazanır

Özgüllük de eşitse dosyada daha aşağıda yazılan kural kazanır:

.rol {    color: crimson;} .rol {    color: teal;}

İki seçici de 0-1-0; rol satırı teal olur. Sıra dosyalar arasında da geçerlidir: <head> bölümünde iki CSS dosyası bağladıysan, eşitlikte sonra bağlanan dosyadaki kural kazanır. Bu yüzden dışarıdan aldığın hazır CSS dosyalarını önce, kendi dosyanı en son bağlarsın: son sözü senin dosyan söyler.

Toparlarsak tarayıcı, bir özelliğin değerini şu sırayla seçer:

Tarayıcının varsayılan kuralları bu yarışta hep en altta kalır: senin yazdığın kural, ne kadar zayıf bir seçiciyle yazılmış olursa olsun, onları yener.

#Geliştirici araçlarında CSS denemek

Kod yaz, kaydet, sayfayı yenile, bak, yeniden yaz: bu döngü yavaş. Geliştirici araçlarında CSS'i doğrudan tarayıcıda, anında değiştirerek deneyebilirsin. "Bu kural neden çalışmıyor?" sorusunun cevabı da orada.

Aşağıdaki görüntü gerçek bir Styles sekmesi. Sayfa kartın kısa bir kopyası; stil.css'ine bilerek iki yazım hatası koyduk (9. ve 10. satırlar), sonra rol satırına sağ tıklayıp İncele dedik. Bu dosyayı yazman gerekmiyor; aynı ipuçlarını Görev 5'te kendi sayfanda arayacaksın.

1body {2    background-color: #0a1428;3    color: #f0e6d2;4    font-family: "Segoe UI", Arial, sans-serif;5}6 7.kart p {8    color: dimgray;9    padding: 20;10    backround-color: #1e2328;11}12 13.kart .rol {14    color: crimson;15}

Görüntüde şunları bul; her biri bir ipucu:

• Üstü çizili bildirim (color: dimgray): ezilmiş. Daha özgül bir kural (.kart .rol, 0-2-0) aynı özelliği vermiş ve kazanmış. Onay kutusuyla kendin kapattığın bildirimler de böyle çizilir.
• Turuncu uyarı üçgeni: tarayıcı bildirimi anlamamış ve atmış. Özellik adı yanlışsa (backround-color) bütün satırın, yalnızca değer yanlışsa (padding: 20) yalnızca değerin üstü çizilir. Üçgenin üstüne gelince sebebi yazar: Unknown property name (bilinmeyen özellik adı) ya da Invalid property value (geçersiz değer).
• user agent stylesheet: tarayıcının varsayılan kuralları. Paragrafların üstündeki ve altındaki boşluk buradan gelir: margin-block-start ve margin-block-end, üst ve alt margin'in başka bir yazımı (1em yazı boyu kadar demek). display özelliğini Ders 21'de öğreneceksin.
• Inherited from body: ebeveynden kalıtımla gelenler. Soluk yazılan background-color kalıtımla geçmez; color geçerdi ama öğenin kendi kuralı onu ezdi; font-family geçti ve kullanılıyor.
• Aradığın kural listede hiç yoksa seçici o öğeyi yakalamıyordur ya da dosya hiç gelmemiştir.

Geliştirici araçların Türkçe açılıyorsa aynı yerlerde şu adları görürsün:

#Kartın son hâli

Şimdiye kadarki parçaları birleştir. stil.css'in son hâli aşağıda: satır satır yaz, sonra geliştirici araçlarında onay kutularıyla tek tek kapatıp aç ve her satırın neyi değiştirdiğini gör. Sonuç, dersin başındaki ikinci önizleme.

1* {2    box-sizing: border-box;3}4 5body {6    margin: 0;7    padding: 2rem 1rem;8    background-color: #0a1428;9    color: #f0e6d2;10    font-family: "Segoe UI", Arial, sans-serif;11    line-height: 1.6;12}13 14.kart {15    max-width: 320px;16    margin: 0 auto;17    padding: 1.5rem;18    background-color: #1e2328;19    border: 2px solid #c8aa6e;20    border-radius: 12px;21}22 23.ad {24    margin: 0;25    color: #c8aa6e;26    font-family: "Cinzel", serif;27    font-size: 2rem;28}29 30.rol {31    margin-top: 0;32    color: hsl(40 20% 65%);33    font-size: 0.875rem;34    text-transform: uppercase;35}36 37.dugme {38    width: 100%;39    padding: 0.75rem;40    border: 0;41    border-radius: 8px;42    background-color: hsl(175 90% 41%);43    color: #0a1428;44    font: inherit;45    font-weight: 700;46    cursor: pointer;47}48 49.dugme:hover {50    background-color: hsl(175 90% 50%);51}

Yeni gördüklerin:

• .ad ve .rol'daki margin: 0 ve margin-top: 0: tarayıcının başlığa ve paragrafa verdiği varsayılan boşlukları kaldırır; başlık ile rol satırı birbirine yaklaşır.
• Düğmenin zemini hsl(175 90% 41%), hover rengi hsl(175 90% 50%): yalnızca açıklık değişti. Ton ve doygunluk aynı kaldığı için renk, "aynı rengin açığı" gibi görünür. Düğme yazısının zemine kontrastı 8,6'ya 1.
• border: 0: tarayıcının düğmeye çizdiği varsayılan kenarlığı kaldırır.
• font: inherit; yazı ayarlarının hepsini karttan alır; alttaki font-weight: 700 yalnızca kalınlığı değiştirir. İki satırın yerini değiştirirsen font: inherit kalınlığı da ebeveyninkine geri çevirir ve yazı incelir. Sıra kuralının küçük bir örneği.

#Sık hatalar: CSS sessizce görmezden gelir

JavaScript'teki gibi programı durduran bir hata yok: sayfa her durumda açılır, yalnızca bir şey eksik ya da yanlış görünür. Console'da kırmızı bir satır yalnızca dosya hiç bulunamadığında çıkar (404). Bu yüzden ilk adım hep aynı: öğeye sağ tıkla, İncele'yi seç, Styles sekmesine bak. Bir hata aldığında buraya ya da bütün derslerin hatalarının toplandığı hata rehberine bak.

Sık hataNoktalı virgülü unutmak: alttaki satır da çalışmıyor

Ne zaman çıkar? Bir bildirimin sonundaki ; unutulunca. VS Code bir alt satırdan başlayarak birkaç yerin altını kırmızıyla çizer. İlk çizginin üstüne fareyle gelince semi-colon expected ("noktalı virgül bekleniyordu") yazar; aşağıdaki { expected gibi öbür çizgiler aynı hatanın yan etkisidir.

.bozuk {    color: white    background-color: purple;    padding: 16px;}

.dogru {    color: white;    background-color: purple;    padding: 16px;}

127.0.0.1:5500/deneme.html

Tarayıcı bir bildirimi ; görene kadar okur. Bozuk kuralda color özelliğinin değeri white background-color: purple olmuş: böyle bir renk yok, bildirim bütünüyle atılır. Sonuçta yazı rengi de zemin de gider, yalnızca padding çalışır. Geliştirici araçlarında iki satır tek satıra kaynamış görünür:

Nasıl düzelir? white'tan sonra ; koy. VS Code'un ilk çizgisi eksiğin kendisini değil, okumanın takıldığı yeri gösterir; eksik ;'yi o çizginin hemen üst satırının sonunda ara. Düzeltince öbür çizgiler de kaybolur.

// başlığın rengih1 {    color: crimson;}

kart {    background-color: #1e2328;}

.kutu {    border: 2px solid goldenrod;    margin-bottom: 8px;} .birimsiz {    padding: 20;} .birimli {    padding: 20px;}

Sık hataStil hiç gelmiyor: <link>'teki yol yanlış (404)

Ne zaman çıkar? <link>'teki yol, dosyanın gerçek yeriyle uyuşmayınca. Sayfa açılır ama hiç stil yoktur: beyaz zemin, Times New Roman.

Örnek: stil.css'i düzenli olsun diye css adında bir klasöre taşıdın ama index.html'deki satırı güncellemedin:

<link rel="stylesheet" href="stil.css">

Console sekmesinde kırmızı bir satır çıkar; metni, kullandığın sunucuya göre değişir. Live Server dosyayı bulamayınca "böyle bir dosya yok" diyen küçük bir HTML sayfası gönderir. Tarayıcı stil beklerken HTML gelince Ders 18'de gördüğün mesajı verir:

Refused to apply style from 'http://127.0.0.1:5500/stil.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

npx serve'de mesaj sorunu doğrudan söyler: sunucu 404, yani "bulunamadı" demiş.

Failed to load resource: the server responded with a status of 404 (Not Found)

Mesaj hangisi olursa olsun asıl kanıt Network sekmesinde: stil.css satırı kırmızıdır, başında ✕ işareti, Status sütununda 404 yazar. Sayfanın kendisi ise 200 ile gelmiştir:

npx serve kullanıyorsan isteği terminalde de görürsün:

PS C:\kod\sampiyon-karti> npx serve... HTTP  11.10.2026 16:10:45 ::1 GET /stil.cssHTTP  11.10.2026 16:10:45 ::1 Returned 404 in 3 ms

Sayfayı sunucusuz, dosyaya çift tıklayarak açtıysan Console'daki mesaj Failed to load resource: net::ERR_FILE_NOT_FOUND olur.

Nasıl düzelir? Yolu index.html'in yerine göre yeniden yaz: href="css/stil.css". Dosya adını harfi harfine denetle (stil.css mi still.css mi?) ve adın stil.css.txt olmadığından emin ol. Network sekmesinde satır 200 olunca stil gelir.

#ahri p {    color: dimgray;} .vurgu {    color: crimson;}

.kart {    backround-color: #1e2328;}

#Görevler

Görevleri sampiyon-karti klasöründe, yeni dosyalarda yap. İlk dört görev aynı sayfa üstünde ilerler: bir eşya dükkânı. dukkan.html'i aşağıdaki gibi yaz; görevlerde yalnızca <head> bölümüne ve CSS'e dokunacaksın. İçindeki <span>, Ders 19'da adını duyduğun anlamsız satır içi kap: metnin bir parçasına sınıf verebilmek için kullanılır, <div>'in satır içi kardeşidir.

1<!doctype html>2<html lang="tr">3<head>4    <meta charset="utf-8">5    <meta name="viewport" content="width=device-width, initial-scale=1">6    <title>Eşya dükkânı</title>7</head>8<body>9    <h1>Eşya dükkânı</h1>10    <p class="altin">Altının: 1250</p>11    <ul class="esyalar">12        <li class="esya">Uzun Kılıç <span class="fiyat">350</span></li>13        <li class="esya">Doran'ın Kalkanı <span class="fiyat">450</span></li>14        <li class="esya pahali">Sonsuzluk Kılıcı <span class="fiyat">3450</span></li>15    </ul>16    <p class="not">Fiyatlar altın cinsinden.</p>17    <button class="satin-al">Satın al</button>18</body>19</html>

<link rel="stylesheet" href="dukkan.css">

1body {2    background-color: #10131a;3    color: #e8e6e3;4    font-family: "Segoe UI", Arial, sans-serif;5    line-height: 1.5;6}7 8.satin-al {9    font: inherit;10}

12h1,13.altin {14    color: #c8aa6e;15}16 17.fiyat {18    font-weight: 700;19}20 21.pahali {22    color: tomato;23}24 25.pahali .fiyat {26    text-decoration: underline;27}28 29.esya:hover {30    background-color: hsl(220 25% 20%);31}

1* {2    box-sizing: border-box;3}

37.esya {38    width: 260px;39    padding: 12px 16px;40    border: 2px solid #3c3c41;41    margin-bottom: 8px;42    border-radius: 8px;43}

1* {2    box-sizing: border-box;3}4 5body {6    background-color: #10131a;7    color: #e8e6e3;8    font-family: "Segoe UI", Arial, sans-serif;9    line-height: 1.5;10}11 12h1 {13    font-size: 2.5rem;14}15 16.satin-al {17    width: 50%;18    font: inherit;19}20 21h1,22.altin {23    color: #c8aa6e;24}25 26.fiyat {27    font-weight: 700;28}29 30.pahali {31    color: tomato;32}33 34.pahali .fiyat {35    text-decoration: underline;36}37 38.esya:hover {39    background-color: hsl(220 25% 20%);40}41 42.esya {43    width: 260px;44    padding: 12px 16px;45    border: 2px solid #3c3c41;46    margin-bottom: 8px;47    border-radius: 8px;48    font-size: 1.125rem;49}50 51.not {52    font-size: 0.75rem;53}

1<!doctype html>2<html lang="tr">3<head>4    <meta charset="utf-8">5    <meta name="viewport" content="width=device-width, initial-scale=1">6    <title>Maç sonucu</title>7    <link rel="stylesheet" href="skor.css">8</head>9<body>10    <section class="sonuc" id="mac">11        <h2 class="baslik">Zafer</h2>12        <p class="sure">Süre: 31:42</p>13        <p class="kda">Lux · 7 / 2 / 15</p>14    </section>15</body>16</html>

1body {2    background-color: #0a1428;3    color: #f0e6d24    font-family: "Segoe UI", Arial, sans-serif;5}6 7.sonuc {8    max-width: 360px;9    padding: 24;10    border: 2px solid #c8aa6e;11}12 13baslik {14    color: #0ac8b9;15}16 17#mac p {18    color: #a09b8c;19}20 21.kda {22    color: #f0e6d2;23    font-weight: 700;24}

1body {2    background-color: #0a1428;3    color: #f0e6d2;4    font-family: "Segoe UI", Arial, sans-serif;5}6 7.sonuc {8    max-width: 360px;9    padding: 24px;10    border: 2px solid #c8aa6e;11}12 13.baslik {14    color: #0ac8b9;15}16 17.sure {18    color: #a09b8c;19}20 21.kda {22    color: #f0e6d2;23    font-weight: 700;24}

#Kendini sına

#ahri .ad {    color: crimson;} .kart h1 {    color: teal;} h1.ad {    color: goldenrod;}

<article class="kart" id="ahri">    <h1 class="ad">Ahri</h1></article>

.kutu {    width: 250px;    padding: 10px 20px;    border: 1px solid gray;    margin: 8px;}

.rol {    color: crimson    font-size: 1.25rem;    margin: 0;}

#Kayıt noktası

Kartı ve görev dosyalarını kaydet. VS Code terminalinde, C:\kod\sampiyon-karti klasöründeyken:

Bir sonraki derste kutuları yan yana ve ızgara hâlinde dizmeyi (flexbox ve grid) ve sayfayı telefona uydurmayı öğreneceksin; bu kartı çoğaltıp her ekrana uyan bir şampiyon listesi kuracaksın.