Yükleniyor...

CSS Giriş

Düz HTML metin ve bağlantı gösterebilir, ancak renk, boşluk ve düzeni kontrol edene kadar sayfalar eksik görünür. CSS, yapılandırılmış işaretlemeyi tasarlanmış bir sayfaya çeviren dildir.

CSS nedir?

CSS (Cascading Style Sheets), HTML belgelerini biçimlendirmek için standart dildir. Öğelere nasıl görüneceklerini söyleyen kurallar yazarsınız: metin rengi, yazı tipleri, kenar boşlukları, arka planlar, düzen ve daha fazlası. HTML «bu içerik nedir?» sorusuna cevap verir. CSS «nasıl görünmeli?» sorusuna cevap verir.

HTML ve CSS birlikte çalışır

HTML’i sayfanın iskeleti, CSS’yi giysi ve cilası gibi düşünün. CSS’nin biçimlendirecek anlamlı öğeleri olması için hâlâ sağlam HTML’e ihtiyaç vardır — başlıklar, paragraflar, bağlantılar ve landmark’lar. Bu kurs temel HTML bildiğinizi varsayar.

📊 HTML ve CSS rolleri

Katman Ana iş Tipik sorular
HTML Yapı ve anlam Bu bir başlık, paragraf veya bağlantı mı?
CSS Görünüm ve düzen Hangi renk, boyut, boşluk ve düzen?
JavaScript (sonra) Davranış ve etkileşim Tıklayınca ne olur?

JavaScript’i sonraki bir kursta öğreneceksiniz. Şimdilik ayrımı net tutun: yapı HTML’de, görünüm CSS’te.

Bir CSS kuralına ilk bakış

Bir CSS kuralının seçicisi (neyi biçimlendir) ve bildirimleri (nasıl biçimlendir) vardır. Bildirimler süslü parantez içinde durur ve özellik ile değer kullanır.

Basit bir kural

css
CSS Code 
h1 {
color: navy;
font-size: 2rem;
}

Bu kural ne yapar

  • h1 seçicidir — her h1 öğesini hedefler
  • color: navy; metin rengini ayarlar
  • font-size: 2rem; başlık boyutunu ayarlar
  • Her bildirim noktalı virgülle biter
    Seçicileri ve birimleri sonra derinlemesine öğreneceksiniz. Burada kuralın biçimini görmek yeter.

CSS’yi sayfada görmek

Tarayıcılar CSS kurallarını eşleşen HTML öğelerine uygular. Aşağıda kısa bir sayfa, HTML ve CSS’yi tek dosyada görmeniz için iç <style> bloğu kullanır. Sonraki oturumlar harici stil sayfalarını ve CSS eklemenin diğer yollarını kapsar.

style bloğu olan HTML

html
HTML Code 
<!DOCTYPE html>
<html>
<head>
<title>CSS Demo</title>
<style>
body {
font-family: Georgia, serif;
background-color: #f5f7fb;
}
h1 {
color: #1a365d;
}
p {
color: #334155;
line-height: 1.6;
}
</style>
</head>
<body>
<h1>Styled with CSS</h1>
<p>This paragraph uses the p rule above.</p>
</body>
</html>

Ne değişti

<style> kuralları olmadan sayfa tarayıcının varsayılan görünümünü kullanır. CSS ile arka plan yumuşar, başlık koyu mavi olur ve paragraf okunabilir boşluk kazanır. Aynı HTML içeriği — farklı sunum.

«cascading» neden önemli (önizleme)

CSS’teki «Cascading», stillerin birkaç yerden gelebileceği ve tarayıcının cascade ile specificity kullanarak hangi kuralın kazandığını çözdüğü anlamına gelir. Henüz tam algoritmaya ihtiyacınız yok. Şunu unutmayın: birden çok kural aynı öğeyi hedefleyebilir ve CSS’nin nihai görünümü seçmek için net bir sistemi vardır. Sonraki cascade/specificity oturumları bunu pratik yapar.

Kendiniz deneyin

  1. intro.html adlı bir dosya oluşturun.
  2. HTML-with-style örneğini yapıştırın, kaydedin ve tarayıcıda açın.
  3. h1 kuralındaki color: #1a365d; değerini color: teal; yapın, kaydedin ve yenileyin.
  4. Başlık renginin güncellendiğini doğrulayın. Bir şey değişmezse kaydı ve doğru sekmeyi kontrol edin.

Yaygın hatalar

  • CSS’nin sayfa yapısı oluşturmasını beklemek — başlık, liste ve bağlantılar için HTML öğeleri kullanın; bunları CSS ile biçimlendirin
  • Seçici veya parantez olmadan özellik adları yazmak, böylece tarayıcı bildirimleri yok sayar
  • Bildirimden sonra noktalı virgülü unutmak; aynı kuraldaki sonraki özelliği bozabilir
  • Görünür içeriği yalnızca CSS’ye koymak — CSS içeriği biçimlendirir; HTML metninin yerini almaz

Özet

  • CSS HTML sayfalarını biçimlendirir: renkler, yazı tipleri, boşluk, düzen ve sunum
  • HTML içeriği yapılandırır; CSS görünümü kontrol eder
  • Bir CSS kuralı seçiciyi { } içindeki özellik/değer bildirimleriyle eşleştirir
  • <style> bloğuyla başlayıp sonra harici stil sayfalarına geçebilirsiniz
  • Cascading, birden çok kuralın uygulanabileceği anlamına gelir; sonraki dersler hangisinin kazandığını açıklar
  • Küçük bir kuralı düzenleyip tarayıcıyı yenileyerek pratik yapın

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
6
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 1 / 1
Css Ders