CSS 1. Ders: Renkler ve Seçiciler — Video Rehber

İlk CSS kuralın

Bir CSS kuralının seçici, özellik ve değerini ayırt ederek uygulamak.

Kavramı kur

CSS, HTML ağacındaki öğelere görünüm kuralları uygular. Kuralın başındaki seçici hangi öğelerin etkileneceğini belirtir; süslü parantez içindeki bildirimler neyin değişeceğini söyler. color bir özelliktir, tomato onun bir değeridir. Aynı öğeye birden fazla kural uygulanabildiği için tarayıcı uygun değerleri kaskad kurallarıyla seçer.

Neden böyle çalışıyor?

İlk örneklerde style etiketi kullanmak tek dosyada deneme yapmayı kolaylaştırır. Proje büyüyünce kuralları ayrı bir CSS dosyasına ayırabilirsin. Her değişiklikte hem HTML hem CSS dosyasını kaydet; tarayıcıda doğru dosyayı açtığını kontrol et. Yüklenmeyen bir dosya ile eşleşmeyen bir seçici birbirinden farklı hatalardır.

Çalışma sırası

Bir özelliği değiştirmeden önce hangi sonucu beklediğini yaz. Sonra yalnızca o özelliği değiştir ve farkı gözlemle. Aynı anda renk, boyut, boşluk ve yerleşimi değiştirmek hangi kuralın ne yaptığını anlamanı zorlaştırır. Geliştirici araçlarının Styles ve Computed bölümleri hangi bildirimin gerçekten uygulandığını gösterir.

İkinci örnek · 1

h2 seçicisi sayfadaki bütün h2 öğelerini seçer. Kodun tamamı yazılı derste bulunur.

<style>
  h2 { color: #245f9e; font-size: 28px; }
  p { color: #334155; line-height: 1.7; }
</style>
<h2>Bugünkü hedefim</h2>
<p>Bir CSS kuralını açıklayabiliyorum.</p>

Beklenen sonucu oku

Süslü parantezlerin eksikliği sonraki kuralların da yanlış yorumlanmasına yol açabilir.

Beklenen: Mavi bir h2 ve rahat satır aralığına sahip koyu paragraf.

Bir değeri sen değiştir

Başlığın yalnızca rengini değiştir; sonucu tahmin et. İkinci bir h2 ekle; ikisinin de neden etkilendiğini anlat.

Hata nereden gelir?

CSS dosyası yüklenmiyorsa link href yolunu Network bölümünde denetle.

Kendi çözümünü kur

Aynı başlığa ikinci bir color kuralı ekle; DevTools ile hangisinin kazandığını incele. Aynı özgüllük ve koşullarda daha sonra yazılan bildirim kazanabilir; üstü çizilmiş bildirime bak.

Çözüm varyasyonu · 1

Önce kendi denemeni yap; sonra bu varyasyonun girdileri ile sonucunu karşılaştır.

<style>
h2 { color: #a33b31; }
p { font-size: 18px; line-height: 1.8; }
</style>
<h2>Deneme başlığı</h2><p>Okunabilir bir paragraf.</p>

Kendini kontrol et

color ve background-color aynı şeyi mi değiştirir? Yanıt: Hayır; color metnin, background-color öğenin arka planının rengini belirler.

Beklenen: Kırmızımsı başlık ve 18px paragraf.