CSS ile Görsel Düzen

Bir cümlelik özet

CSS, HTML ile hazırladığın sayfanın renk, yazı tipi, hizalama ve boşluklarını belirleyerek onu düzenli ve okunabilir hâle getiren dildir.

Neden önemli?

HTML bir sayfanın içeriğini ve yapısını tanımlar: başlıklar, paragraflar, listeler. Ama sadece HTML ile hazırlanan bir sayfa süssüz görünür; her şey siyah yazı ve beyaz zemindir.

CSS (Cascading Style Sheets, yani Basamaklı Stil Şablonları), bu içeriğin nasıl görüneceğini anlatır. Aynı HTML sayfasını farklı CSS ile bambaşka gösterebilirsin. Bu ayrım önemlidir: içeriği bir kez yazarsın, görünümü istediğin kadar değiştirebilirsin.

Gerçek hayattan bir benzetme: HTML, bir odadaki eşyaların listesidir (masa, sandalye, lamba). CSS ise o eşyaların rengini, yerini ve aralarındaki boşluğu belirleyen düzenlemedir. Aynı eşyalarla çok farklı odalar kurabilirsin.

CSS nedir ve nasıl yazılır?

CSS, bir kural listesinden oluşur. Her kuralın iki parçası vardır: hangi ögeyi etkilediğini söyleyen seçici (selector) ve o ögeye ne yapılacağını söyleyen bildirimler (özellik ve değer).

Bir CSS kuralının yapısı

Aşağıdaki kural, tüm paragrafları koyu gri renkte ve biraz büyük yazar.

p {
  color: #333333;
  font-size: 18px;
}

Burada p seçicidir. Süslü parantez içindekiler bildirimlerdir. color ve font-size birer özelliktir; #333333 ve 18px ise onların değerleridir. Her bildirim noktalı virgülle biter.

Örnek: Aynı içerik, farklı görünüm

Elimizde şu HTML olsun:

<h1>Robotik Kulübü</h1>
<p>Her cuma buluşuyoruz.</p>

Bu iki satır tek başına sade görünür. Aşağıdaki CSS ile başlığı mavi, paragrafı gri yaparız:

h1 {
  color: #1a5fb4;
}
p {
  color: #555555;
}

İçeriği hiç değiştirmeden görünümü tamamen değiştirdik.

Seçiciler: Etiket, class ve id

Bir kuralı yalnız belirli ögelere uygulamak için üç temel seçici türü kullanırız.

Etiket seçicisi

p, h1, ul gibi doğrudan etiket adını yazarsan, o türdeki tüm ögeler etkilenir. Yukarıdaki örnekler etiket seçicisiydi.

Class seçicisi

Bir grup ögeyi ortak stille biçimlendirmek istersen class kullanırsın. HTML'de sınıf adı verirsin, CSS'te başına nokta koyarsın.

<p class="uyari">Atölyeye kaskla gel.</p>
<p>Normal bir paragraf.</p>

.uyari {
  color: #b30000;
  font-weight: bold;
}

Yalnız class="uyari" olan paragraf kırmızı ve kalın olur. Aynı sınıfı istediğin kadar ögeye verebilirsin.

id seçicisi

id, sayfada yalnız bir ögeye verilen benzersiz addır. CSS'te başına diyez (#) koyarsın.

<h1 id="ana-baslik">Robotik Kulübü</h1>

#ana-baslik {
  color: #1a5fb4;
}

Kural olarak: aynı sınıf çok ögede olabilir, ama aynı id sayfada bir kez kullanılır.

Renk, yazı tipi ve hizalama

Renk

Renkleri isimle (red, blue) ya da onaltılık (hex) kodla yazabilirsin. Hex kodu # ile başlar ve altı karakterdir: #1a5fb4. color yazının rengini, background-color ise arkaplan rengini belirler.

body {
  background-color: #f5f5f5;
  color: #222222;
}

Yazı tipi ve boyut

font-family yazı tipini, font-size boyutunu belirler. Yazı tipini verirken yedek seçenekler yazmak iyi bir alışkanlıktır; ilki yoksa tarayıcı sonrakini dener.

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}

Hizalama

text-align metni sola, ortaya veya sağa hizalar.

h1 {
  text-align: center;
}

Kutu modeli: içerik, padding, border, margin

Tarayıcı her HTML ögesini bir kutu gibi düşünür. Bu kutunun dört katmanı vardır ve bu yapıya kutu modeli (box model) denir.

• content (içerik): Yazının veya görselin bulunduğu iç alan.
• padding (iç boşluk): İçerik ile kenarlık arasındaki boşluk.
• border (kenarlık): Kutunun etrafındaki çizgi.
• margin (dış boşluk): Kutunun diğer ögelerle arasındaki boşluk.

İçten dışa sıra şöyledir: içerik → padding → border → margin.

Örnek: Bir kutu tasarlamak

.kart {
  padding: 16px;
  border: 2px solid #1a5fb4;
  margin: 20px;
  background-color: #ffffff;
}

Bu kural: içeriğin çevresine 16 piksel iç boşluk, mavi bir kenarlık, dışına 20 piksel boşluk ve beyaz zemin verir. padding ve margin farkını karıştırmamak için şunu hatırla: padding kenarlığın içinde, margin kenarlığın dışındadır.

Stili sayfaya ekleme yolları

CSS'i HTML'e üç yolla bağlayabilirsin. Genelde en iyisi üçüncüsüdür.

1. Satır içi (inline)

Ögeye doğrudan style yazarsın. Küçük denemeler dışında önerilmez, çünkü içerik ve stil karışır.

<p style="color: red;">Dikkat.</p>

2. Sayfa içi (internal)

<head> içine <style> etiketi koyarsın. Tek sayfalık işlerde uygundur.

3. Harici stil dosyası (önerilen)

Kuralları ayrı bir .css dosyasına yazar, HTML'e <link> ile bağlarsın. Böylece aynı stili birçok sayfada kullanabilirsin.

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

Harici dosya en düzenli yöntemdir: içerik index.html'de, görünüm stil.css'te durur.

Mini uygulama

Kendi tanıtım kartını renklendireceksin. Önce kart.html dosyasını oluştur:

<!doctype html>
<html lang="tr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kartım</title>
  <link rel="stylesheet" href="stil.css">
</head>
<body>
  <div class="kart">
    <h1 id="ad">Robotik Kulübü</h1>
    <p class="alt">Her cuma buluşuyoruz.</p>
  </div>
</body>
</html>

Sonra aynı klasöre stil.css dosyasını yaz:

body {
  font-family: Arial, sans-serif;
  background-color: #f0f4f8;
}
.kart {
  background-color: #ffffff;
  border: 2px solid #1a5fb4;
  padding: 20px;
  margin: 30px;
  text-align: center;
}
#ad {
  color: #1a5fb4;
}
.alt {
  color: #555555;
}

Görevlerin:

1. .kart içindeki padding değerini 40px yapıp değişimi gözle.
2. #ad rengini kendi sevdiğin bir renge çevir.
3. .alt paragrafına font-size: 20px; ekle.

Uygulama laboratuvarı: CSS ile Görsel Düzen

CSS ile Görsel Düzen konusunu kalıcı hâle getirmenin en iyi yolu, kavramı küçük ve ölçülebilir bir göreve dönüştürmektir. Bu çalışmada CSS nedir ve nasıl yazılır? ile Örnek: Aynı içerik, farklı görünüm arasındaki ilişkiyi kullanarak anlamlı HTML, düzenli CSS, gerektiğinde küçük JavaScript ve erişilebilirlik kontrolü hazırlayacaksın. Amaç yalnız sonucun çalışması değil; hangi kararı neden verdiğini, neyi test ettiğini ve hangi durumda tasarımı değiştireceğini açıklayabilmektir.

Görev senaryosu

Şu senaryoyu ele al: farklı ekranlarda okunabilen ders kartları arayüzü. Dersin ana hedefi “Seçiciler, renk, yazı tipi ve kutu modeliyle bir sayfayı CSS ile düzenlemeyi öğren” olduğuna göre önce problemi tek cümleyle tanımla. Ardından sistemin alacağı girdiyi, uygulayacağı işlemi ve üreteceği çıktıyı ayrı ayrı yaz. Bilmediğin bir ayrıntı varsa onu varsayım olarak işaretle; varsayımı gerçek bilgi gibi kullanma.

1. Planla: Başlangıç durumunu, beklenen sonucu ve kullanacağın kavramları yaz.
2. En küçük sürümü kur: Yalnız temel davranışı çalıştır; süsleme ve ek özellikleri sonraya bırak.
3. Üç test hazırla: Normal bir durum, sınırda bir durum ve hatalı ya da beklenmeyen bir durum seç.
4. Sonucu kaydet: Beklenen ile gerçekleşeni yan yana yaz; fark varsa olası nedeni belirt.
5. Tek değişiklik yap: Aynı anda birçok şeyi değiştirmek yerine bir kararı düzeltip testi yeniden çalıştır.

Başarı ölçütleri

• Başlık hiyerarşisi mantıklı mı?
• Bağlantılar klavye ve dokunmayla çalışıyor mu?
• Mobil ekranda yatay taşma var mı?
• Görsellerin alternatif metni ve boyutları tanımlı mı?
• HTML, CSS ve JavaScript sorumlulukları birbirine karışıyor mu?

“CSS ile Görsel Düzen” çalışmasını bitirdiğinde ürünü bir arkadaşına yalnız bölüm başlıklarıyla anlat. Arkadaşın farklı ekranlarda okunabilen ders kartları arayüzü senaryosundaki adımları ve karar nedenlerini takip edebiliyorsa anlatım yeterince açıktır. Anlaşılmayan noktayı daha fazla terim ekleyerek değil, CSS nedir ve nasıl yazılır? ve Örnek: Aynı içerik, farklı görünüm ilişkisini daha küçük adımlara bölerek düzelt.

Sık yapılan hatalar

Noktalı virgülü unutmak

Her bildirim ; ile bitmelidir. Unutursan sonraki kural çoğu zaman çalışmaz.

/* Yanlış */
color: red
font-size: 18px;

Class ve id işaretlerini karıştırmak

HTML'de class="kart" yazarsın ama CSS'te .kart (nokta) kullanırsın. id için HTML'de id="ad", CSS'te #ad (diyez) yazılır.

padding ile margin'i karıştırmak

Padding kenarlığın içindeki boşluktur, margin dışındaki. İki öge birbirine çok yakınsa çözüm genelde margin eklemektir.

CSS dosyasını bağlamayı unutmak

Harici .css dosyası çalışmıyorsa, önce <link> etiketini ve dosya adının doğru yazıldığını kontrol et.

Güvenlik notu

CSS sadece görünümü değiştirir; kişisel veri toplamaz. Yine de sayfa hazırlarken adres, telefon, okul adı veya tam ad gibi kişisel bilgileri yayımlanacak sayfalara yazma. Denemelerinde "Robotik Kulübü" gibi hayalî adlar kullan. İnternette paylaşılan her sayfayı başkalarının görebileceğini unutma; bir yetişkinle birlikte kontrol etmek iyi bir alışkanlıktır.

Ders özeti

• CSS, HTML içeriğinin renk, yazı tipi, hizalama ve boşluklarını belirleyen stil dilidir.
• Her CSS kuralı bir seçici ve bildirimlerden oluşur; bildirimler noktalı virgülle biter.
• Etiket (p), class (.ad) ve id (#ad) üç temel seçici türüdür.
• Kutu modeli içten dışa content, padding, border ve margin katmanlarından oluşur.
• Stili eklemenin en düzenli yolu, <link> ile bağlanan harici bir .css dosyasıdır.

Kontrol soruları

1. CSS'in görevi nedir ve HTML'den farkı nedir?
2. .uyari seçicisi hangi ögeleri etkiler? Peki #uyari?
3. Kutu modelinde padding ile margin arasındaki fark nedir?
4. color ve background-color özellikleri neyi değiştirir?
5. Harici CSS dosyasını HTML'e hangi etiketle bağlarız?

Cevaplar

1. CSS, sayfanın görünümünü (renk, yazı tipi, boşluk, hizalama) belirler; HTML ise içeriği ve yapıyı tanımlar. İçerik bir kez yazılır, görünüm CSS ile değiştirilir.
2. .uyari, class="uyari" olan tüm ögeleri etkiler. #uyari ise id="uyari" olan tek ögeyi etkiler; aynı id sayfada bir kez kullanılır.
3. Padding, içerik ile kenarlık arasındaki iç boşluktur. Margin ise kenarlığın dışındaki, öge ile komşuları arasındaki boşluktur.
4. color yazının rengini, background-color ise arkaplan rengini değiştirir.
5. <head> içine yazılan <link rel="stylesheet" href="stil.css"> etiketiyle bağlanır.

Kaynak ve doğrulama notu

“CSS ile Görsel Düzen” dersi için doğrulama odağı CSS nedir ve nasıl yazılır? ile Örnek: Aynı içerik, farklı görünüm arasındaki ilişkinin örnekler üzerinde tutarlı çalışmasıdır. Örnekler standart HTML, CSS ve tarayıcı JavaScript’i yaklaşımıyla hazırlanmıştır. Sayfa yalnız görsel olarak değil; klavye kullanımı, odak sırası, mobil görünüm ve anlamlı başlık yapısı açısından da kontrol edilmelidir.

Sonraki ders

Responsive Tasarım: Sayfanı telefon, tablet ve bilgisayarda düzgün görünecek biçimde nasıl esnek hâle getireceğini öğreneceksin.