CSS'e Giriş: Renk, Yazı Tipi ve Kutu Modeli

Bu derste ne yapacağız?

Bir önceki derste (4/8) HTML ile sayfanızın iskeletini kurmuş; başlıklar, paragraflar, listeler ve bağlantılar eklemiştiniz. Bu derste aynı sayfaya CSS (Cascading Style Sheets - Basamaklı Stil Sayfaları) ile görsel kimlik kazandıracaksınız: metinlere renk vereceksiniz, yazı tipini değiştireceksiniz ve öğeler arasına düzenli boşluklar eklemek için kutu modelini (box model) öğreneceksiniz. Dersin ön koşulu, önceki derste oluşturduğunuz bir .html dosyasının elinizde bulunması ve temel HTML etiketlerine (başlık, paragraf, liste) aşina olmanızdır. İhtiyacınız olan tek şey bir kod düzenleyici (Not Defteri veya Visual Studio Code gibi) ve bir tarayıcıdır (Chrome, Edge, Firefox gibi); kurulum gerektiren ek bir program yoktur.

Kavram

HTML'i bir evin duvarları, odaları ve kapıları gibi düşünebilirsiniz: yapıyı o kurar. Ama duvarların rengi, mobilyaların dizilişi ya da pencere çerçevelerinin biçimi HTML'in işi değildir; işte tam burada CSS devreye girer. HTML "burada bir başlık var, burada bir paragraf var" der; CSS ise "bu başlık mavi ve kalın olsun, bu paragrafın çevresinde yirmi piksel boşluk bulunsun" der.

Her CSS kuralı üç parçadan oluşur: seçici (hangi öğeye stil uygulanacağını belirtir), özellik (rengi mi, yazı tipini mi, boşluğu mu değiştireceğimiz) ve değer (o özelliğin ne olacağı). Örneğin "bütün paragraflar koyu gri olsun" cümlesinde "paragraflar" seçici, "renk" özellik, "koyu gri" ise değerdir.

Kutu modeli ise her HTML öğesinin aslında görünmez bir kutu içinde durduğu fikrine dayanır. Bu kutunun dıştan içe doğru dört katmanı vardır: margin (dış boşluk; kutunun diğer kutularla arasındaki mesafedir), border (kenarlık; kutunun çerçevesidir), padding (iç boşluk; kenarlık ile içerik arasındaki mesafedir) ve en içte content (asıl içerik; yani metin veya görsel). Bunu bir hediye paketine benzetebilirsiniz: içindeki hediye "content"tir, hediyeyi saran köpük dolgu "padding"tir, paketin kutusu "border"dır, kutunun masadaki diğer paketlerle arasındaki boşluk ise "margin"dir.

Adım adım uygulama

Aşağıdaki adımları, önceki derste oluşturduğunuz .html dosyası üzerinde uygulayacaksınız. CSS'i HTML'e bağlamanın en pratik yolu olan "dahili stil sayfası" (internal stylesheet) yöntemini kullanacağız; bu yöntemde stil kuralları, HTML dosyasının head bölümüne style etiketi içinde yazılır. (Arayüz görselleri kod düzenleyicinize göre farklılık gösterebilir; aşağıdaki adımlar herhangi bir düzenleyicide geçerlidir.)

1. Kod düzenleyicinizde önceki dersten kalan .html dosyasını açın (örneğin site.html).

2. Dosyanın <head> etiketi ile </head> etiketi arasına aşağıdaki gibi bir <style> bloğu ekleyin. Bu blok, tarayıcıya "buradan sonrası CSS kuralıdır" der: <style> ... </style>

3. Style bloğunun içine şu kuralı yazın: body { font-family: Arial, sans-serif; color: #333333; } Burada body seçicisi tüm sayfa gövdesini hedefler; font-family özelliği yazı tipini Arial olarak belirler (Arial bulunamazsa tarayıcı herhangi bir "sans-serif", yani çizgisiz bir yazı tipi kullanır); color özelliği metin rengini koyu gri (#333333 renk kodu) yapar.

4. Dosyayı kaydedin (Ctrl+S) ve tarayıcınızda açık olan sayfayı yenileyin (F5). Sayfanın yazı tipinin ve renginin değiştiğini görmelisiniz.

5. Şimdi başlığınıza (örneğin <h1>) özel bir stil verelim. Style bloğunun içine, body kuralının altına şunu ekleyin: h1 { color: darkblue; padding: 10px; border: 2px solid darkblue; margin-bottom: 20px; }

6. Bu kuralda padding: 10px, başlık metni ile çevresindeki kenarlık arasına on piksel iç boşluk koyar; border: 2px solid darkblue, başlığın etrafına koyu mavi, düz çizgili, iki piksel kalınlığında bir kenarlık çizer; margin-bottom: 20px ise başlığın altındaki bir sonraki öğeyle arasına yirmi piksel dış boşluk bırakır.

7. Dosyayı yeniden kaydedip tarayıcıyı yenileyin. Başlığınızın artık koyu mavi renkte, çevresinde çerçeveli ve boşluklu göründüğünü göreceksiniz.

8. Son olarak paragraflara da stil verelim. Style bloğuna şunu ekleyin: p { line-height: 1.6; margin: 10px 0; } Bu kural, satır aralığını (line-height) 1,6 kat yaparak metni daha okunaklı hale getirir; margin: 10px 0 ise paragrafın üstüne ve altına onar piksel boşluk, sağına ve soluna ise sıfır piksel boşluk verir.

9. Değişiklikleri kaydedip tarayıcıda tekrar yenileyerek sonucu gözlemleyin. Renk kodlarını (örneğin darkblue yerine crimson veya #ff6600 gibi bir kod), kenarlık kalınlığını ya da boşluk değerlerini değiştirip farkı görmek için küçük deneyler yapmanız, kutu modelini içselleştirmenizin en hızlı yoludur.

Sık karşılaşılan sorunlar

Belirti	Olası neden	Çözüm
Sayfayı yenilediğimde hiçbir stil görünmüyor	Style etiketi head yerine body içine yazılmış olabilir ya da dosya kaydedilmemiştir	Style bloğunun head ile /head arasında olduğunu kontrol edin; dosyayı kaydettikten sonra tarayıcıyı yenileyin
Kural yazdım ama etkisi yok	Kuralın sonundaki süslü parantez } unutulmuş ya da noktalı virgül eksik olabilir	Her özellik-değer çiftinin noktalı virgülle bittiğini ve kuralın kapanış parantezi ile sonlandığını kontrol edin
Renk hiç değişmiyor	Seçici, hedeflenen etikete uymuyor olabilir (örneğin h1 yazılmışken sayfada h2 kullanılmış olabilir)	Seçici adının HTML'deki etiket adıyla birebir aynı olduğundan emin olun
Boşluklar beklediğimden farklı görünüyor	Margin ile padding karıştırılmış olabilir	Margin dış boşluk, padding iç boşluktur; hangi boşluğu istediğinize göre doğru özelliği seçin
Tarayıcıda eski hâli görünmeye devam ediyor	Tarayıcı önbelleği (cache) eski sürümü göstermiş olabilir	Sayfayı sert yenileme ile açın (Ctrl+F5) veya tarayıcıyı kapatıp yeniden açın

Mini görev

Kendi .html dosyanızda aşağıdaki üç değişikliği yapın ve sonucu tarayıcıda kontrol edin:

1. Sayfanızdaki tüm bağlantılara (a etiketi) yeşil renk verin ve alt çizgiyi kaldırın (ipucu: text-decoration: none özelliğini deneyin).

2. Listenizin (ul veya ol) etrafına açık gri bir arka plan rengi (background-color) ve on beş piksellik bir iç boşluk (padding) ekleyin.

3. Sayfanızdaki ana başlığa (h1) farklı bir yazı tipi ailesi (font-family) atayın; örneğin "Georgia, serif" gibi tırnaklı bir yazı tipi deneyin.

Kontrol listesi:

Style bloğu head etiketinin içinde mi?
Her kuralın sonunda kapanış süslü parantezi } var mı?
Her özellik-değer çiftinin sonunda noktalı virgül var mı?
Dosya kaydedildi ve tarayıcı yenilendi mi?
Üç değişikliğin üçü de tarayıcıda görünüyor mu?

Kendini sına

1. CSS açılımı nedir ve HTML ile arasındaki temel fark nedir?
2. Bir CSS kuralının üç temel parçasını (seçici, özellik, değer) örnekle açıklayınız.
3. Kutu modelindeki dört katmanı, dıştan içe doğru sırasıyla yazınız.
4. Margin ile padding arasındaki fark nedir?
5. Dahili (internal) stil sayfası, HTML dosyasının hangi bölümüne yazılır?

Cevaplar

1. CSS, "Cascading Style Sheets" yani "Basamaklı Stil Sayfaları" anlamına gelir; HTML sayfanın yapısını ve içeriğini oluştururken, CSS o içeriğin görünümünü (renk, yazı tipi, boşluk gibi) belirler.
2. Örneğin "p { color: red; }" kuralında "p" seçicidir (hangi öğeye uygulanacağını belirtir), "color" özelliktir (neyin değiştirileceğini belirtir), "red" ise değerdir (o özelliğin ne olacağını belirtir).
3. Dıştan içe doğru sırasıyla: margin (dış boşluk), border (kenarlık), padding (iç boşluk), content (içerik).
4. Margin, kutunun dışında kalan ve onu diğer kutulardan ayıran boşluktur; padding ise kutunun içinde, kenarlık ile içerik arasında kalan boşluktur.
5. Dahili stil sayfası, HTML dosyasının head etiketi içine, style etiketi kullanılarak yazılır.

Bu derste CSS'in temel mantığını, seçici-özellik-değer yapısını ve kutu modelini öğrendiniz. Bir sonraki derste (6/8) bu temelin üzerine inşa ederek, öğeleri sayfada yan yana veya istediğiniz düzende yerleştirmenizi sağlayan CSS yerleşim (layout) tekniklerine geçeceğiz.

Bu dersi kayıt olmadan izleyebilirsin. İlerlemeni kaydetmek, sertifika almak ve puan tablosuna girmek için ücretsiz üye ol: Kayıt Ol