CSS'i HTML'e bağlama

Üç yöntem

CSS'i HTML sayfasına bağlamanın üç yolu vardır. Harici yöntem ayrı bir .css dosyasını <link> ile bağlar. İç yöntem <style> etiketini HTML içine yazar. Satır içi yöntem doğrudan etiketin style özniteliğine stilleri koyar.

En çok kullanılanı harici yöntemdir; aynı dosya birçok sayfayı biçimler.

Harici stil sayfası

Harici yöntemde CSS ayrı bir stil.css dosyasında durur. HTML'in <head> bölümüne bir <link> etiketi koyarsın: <link rel='stylesheet' href='stil.css'>.

Bu yöntemin üstünlüğü büyüktür. Tarayıcı CSS'i bir kez önbelleğe alır, tüm sayfalar hızlı yüklenir. Yeni bir tema denemek için yalnızca tek bir dosyayı değiştirirsin; değişiklik tüm siteye aynı anda yansır.

Style etiketi ve satır içi

İç yöntemde <style> etiketini HTML'in <head> bölümüne yazarsın; CSS bildirimleri doğrudan HTML dosyasının içinde olur. Tek bir sayfaya özel stiller için elverişlidir; başka sayfalar bu stilleri görmez.

Satır içi yöntemde ise style özniteliğine bildirim yazarsın: <p style='color: navy'>. Hızlı bir düzeltme için işe yarar ama yaygın kullanımdan kaçınılmalıdır; zira tek bir öğeyi değiştirmek için bile dosyayı güncellemek gerekir.

Uygulama Harici dosyaya body bölümü ekle

Harici stil sayfasının içine yazılacak bir body bölümü ekle. İçinde font-family: sans-serif bildirimi olsun.

Örnek çözümü göster

/* body bölümünü ekle */
body {
  font-family: sans-serif;
}

Kendini test et

link etiketinde rel='stylesheet' neyi belirtir?
```
<link rel="stylesheet" href="stil.css">
```
- Bu bağlantının bir stil sayfası olduğunu
- Sayfanın başlık çubuğu metnini
- HTML belgesinin karakter kodlamasını
- Sayfanın dilini (örneğin Türkçe)
Cevabı göster

Bu bağlantının bir stil sayfası olduğunu — Doğru. rel='stylesheet' bu bağlantının bir stil sayfası olduğunu söyler.

Harici dosyada başlık bölümünü aç

/* stil.css — harici dosya */
____ {
  color: darkblue;
}

Cevabı göster

/* stil.css — harici dosya */
h1 {
  color: darkblue;
}

Yöntemi nereye yazıldığıyla eşleştir

Harici CSS

link etiketiyle bağlanır
Style etiketi

head bölümünde yer alır
Satır içi stil

etiketin style özniteliğine

Sıradaki ders: CSS kural yapısı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler