Anasayfa
Forum
Hakkında
Ders 16: HTML ile CSS Bağlantısı
Ders 16: HTML ile CSS Bağlantısı
Neden?
HTML yapıyı, CSS görünümü tanımlar; bu ayrımı baştan kurmak bakımı kolaylaştırır.
Ne öğreneceğiz?
Bu derste CSS dosyasını bağlamayı ve class kullanımını öğreneceğiz.
Nasıl ilerleyeceğiz?
Önce kavramın amacını düşünün. Ardından aşağıda verilen örneği kendiniz yazın. Kodu kaydedin, tarayıcıda açın ve küçük bir değişiklik yaparak sonucu gözlemleyin.
Öğrenme kuralı: Kodu yalnızca kopyalama. Her satır için “Bu satır neden burada?” ve “Bu satırı silersem ne değişir?” sorularını sor.
Derse başlamadan önce kendini yokla
- Bu konuyu gerçek bir web sayfasında hangi ihtiyacı çözmek için kullanırım?
- Örnekteki hangi HTML elementi içeriğin anlamını taşıyor?
- Uygulamayı kendi fikrimle nasıl değiştirebilirim?
Ders sonunda kontrol
- Kodu kendim, bakmadan tekrar yazabildim mi?
- Tarayıcıda sonucu test ettim mi?
- Karşılaştığım bir hatayı neden oluştuğunu açıklayarak düzelttim mi?
Ders hedefi
Yola
Bir CSS dosyasını HTML sayfasına bağlayabilecek ve temel sınıf kullanımını anlayabileceksiniz.
PHP Kod:
<head>
<link rel="stylesheet" href="css/style.css">
</head>
css/style.css dosyasına şu kodu yazabilirsin:
PHP Kod:
body {
font-family: Arial, sans-serif;
line-height: 1.6;
max-width: 900px;
margin: 0 auto;
padding: 2rem;
}
.baslik {
color: #234a75;
}
HTML'de sınıfı kullanın:
PHP Kod:
<h1 class="baslik">HTML Dersleri</h1>
class aynı türdeki birden fazla elementte kullanılabilir. id ise sayfada genellikle tek bir element için kullanılır ve JavaScript ile hedefleme gibi amaçlarda değerlidir (yani bir HTML sayfasında 4+4 yazıldığında ve bunun bir işlem olduğunun anlayıp bu işlemi makinede çalıştırıp 8 sonucunu ekranda gösteren motor gibi düşünebilirsiniz.).
Sayfa içinde kısa CSS yazmak için <style>, doğrudan element üzerinde stil vermek için style kullanılabilir. Büyük projelerde CSS'yi ayrı dosyada tutmak daha düzenlidir.
