CSS'e Köprü

Bu dersin sonunda bir HTML sayfasına CSS ekleyebilecek ve kutu modelinin parçalarını açıklayabileceksiniz.

CSS nedir?

HTML içeriği belirler, CSS o içeriğin nasıl görüneceğini söyler. Bir CSS kuralı şöyle okunur:

p {
  color: red;
}

• p seçicidir. Kuralın hangi elemanlara uygulanacağını söyler.
• color özelliktir.
• red değerdir.

“Bütün paragrafların yazı rengi kırmızı olsun.”

CSS eklemenin üç yolu

1. style niteliği. Yalnızca o elemanı etkiler. Önceki derslerde gördüğünüz yöntem budur.

<p style="color: red;">Kırmızı yazı</p>

2. style etiketi. head içine yazılır ve o sayfanın tamamını etkiler.

<style>
  p { color: red; }
</style>

3. Ayrı bir CSS dosyası. Asıl tercih edilmesi gereken yöntem budur. Birden fazla sayfa aynı dosyayı kullanabilir. Rengi değiştirmek için tek bir dosyayı düzenlemeniz yeterli olur.

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

Seçiciler

• Etiket seçici: p bütün paragrafları seçer.
• Sınıf seçici: .uyari değeri uyari olan bütün class elemanlarını seçer.
• id seçici: #menu değeri menu olan id elemanını seçer.

Aşağıdaki kutuda style.css sekmesine geçip değerleri değiştirin.

<h1>Duyurular</h1>
<p class="uyari"><marquee>Yarın okul tatil.</marquee></p>
<p>Normal bir paragraf.</p>
<p id="imza">Okul Müdürlüğü</p>

h1 { color: navy; }
.uyari { color: white; background-color: crimson; }
#imza { text-align: right; }

Önceki derslerde gördüğünüz background-color arka plan rengini, text-align yazının hizasını belirler. text-decoration: none ise bağlantıların altındaki çizgiyi kaldırır.

Kutu modeli

HTML’de her eleman aslında bir kutudur. Bu kutunun dört katmanı vardır:

• İçerik (content): Yazı veya resim.
• İç boşluk (padding): İçerik ile kenarlık arasındaki boşluk.
• Kenarlık (border): Kutunun çizgisi.
• Dış boşluk (margin): Kutu ile çevresindeki elemanlar arasındaki boşluk.

<div class="dis">
  Dış kutu
  <div class="kutu">İçerik</div>
</div>

.dis { background-color: lightgray; padding: 1px; }
.kutu {
  background-color: gold;
  margin: 20px;
  padding: 30px;
  border: 5px solid crimson;
}

Gri alan ile kırmızı kenarlık arasındaki boşluk margin, kırmızı kenarlık ile yazı arasındaki sarı boşluk padding değeridir. Değerleri değiştirip farkı görün.

Bilgisayardaysanız önizlemedeki kutuya sağ tıklayıp İncele seçeneğini seçerek bu katmanları geliştirici araçlarında da görebilirsiniz.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Stil</title>
  <style>
    .uyari { color: red; }
  </style>
</head>
<body>
  <p class="uyari">Dikkat!</p>
  <p>Normal metin.</p>
</body>
</html>

Bu derste öğrendikleriniz

• CSS üç şekilde eklenebilir. En iyisi ayrı bir dosyadır.
• Seçiciler etiketle, .class ile veya #id ile yazılır.
• Her eleman içerik, padding, border ve margin katmanlarından oluşan bir kutudur.