Skip to main content

HTML <div> Elementini CSS ile Biçimlendirme

Giriş​

Bu eğitimde, HTML Content Division elementi yani <div> elementini CSS ile nasıl stillendireceğini öğreneceksin.
<div> elementi, bir sayfanın düzenini yapılandırmak ve web sayfasını ayrı ayrı stillenebilecek bölümlere ayırmak için kullanılabilir.

Bu eğitimde şunları yapacaksın:

  • <div> elementleri oluşturup stillendirmek
  • <div> içine başka elementler ekleyip onları stillendirmeyi öğrenmek

Bu beceriler, serinin ilerleyen bölümlerinde tanıtım web sitesini yeniden oluştururken <div> elementini bir layout aracı olarak kullanmana hazırlık olacak.

<div> Elementini Pratikte Keşfetmek​

Hadi ufak bir uygulama yapalım ve <div> elementinin nasıl çalıştığını deneyelim.
Eğer styles.css dosyanda önceki derslerden kalan kodlar varsa hepsini sil.
Ardından <div> etiketi için şu CSS kuralını ekle:

div {
 background-color: green; 
 height: 100px;
 width: 100px;
}

styles.css dosyanı kaydet.
Sonra index.html dosyana geri dön. İçindeki her şeyi sil (sadece şu ilk satır kalsın:
<link rel="stylesheet" href="css/styles.css">).

Ardından aşağıdaki kodları ekleyiniz:

<div></div>

Dikkat et, <div> elementinin açılış ve kapanış etiketleri vardır ama içerik zorunlu değildir.
index.html dosyanı kaydet ve tarayıcında yeniden aç.

Sayfan yüklendiğinde, CSS kuralında belirtildiği gibi 100 piksel genişliğinde ve 100 piksel yüksekliğinde yeşil bir kutu göreceksin.

Yeşil kutu örneği

Artık <div> elementin için bir stil kuralın var ve sayfana eklediğin her <div> aynı şekilde görünecek.
Ama gerçek bir web sitesi yaparken tüm <div> etiketlerinin tek tip görünmesini pek istemezsin. İşte bu yüzden geliştiriciler, farklı <div> elementlerini farklı biçimlendirmek için class kullanır.

Bunu denemek için az önce yazdığın CSS kuralını sil ve styles.css dosyana şu üç yeni CSS kuralını ekle:

.div-1 {
  background-color: blue; 
  height: 50px;
  width: 50px;
}
   
.div-2 {
  background-color: red; 
  height: 100px;
  width: 100px;
}
   
.div-3 {
  background-color: yellow; 
  height: 200px;
  width: 200px;
}

Bu kod parçacığında div-1, div-2 ve div-3 olmak üzere üç farklı class için stil kuralları oluşturdun.
Dikkat et, CSS’te class seçicileri tanımlarken başına . koymak gerekiyor.

Şimdi styles.css dosyanı kaydet ve index.html dosyana geri dön.
Az önce oluşturduğun <div> elementini sil ve onun yerine üç tane <div> ekle.
Her birine, styles.css içinde tanımladığın class isimlerini vererek uygula:

<div class="div-1"></div>
<div class="div-2"></div>
<div class="div-3"></div>

Burada her <div> etiketine bir class eklediğini görebilirsin.
Bunu yaparken açılış <div> etiketine class özniteliğini ve ilgili class adını ekledin.

Dosyanı kaydet ve tarayıcında yeniden aç.
Ekranda aşağıdakine benzer bir görüntü elde edeceksin:

Kutu örneği

Web sayfanda üç farklı <div> göreceksin.
Her biri kendisine atanan CSS kurallarına göre farklı renk ve boyutlarda görünecek.

Ayrıca dikkat et, her <div> kendi satırında başlar. Bunun nedeni <div> etiketlerinin block-level element olmasıdır ve bu onların varsayılan davranışıdır.

<div> İçine Metin Ekleme ve Biçimlendirme​

Bir <div> kutusunun içine metin koymak için açılış ve kapanış <div> etiketlerinin arasına yazı ekleyebilirsin.
index.html dosyandaki her <div> elementinin içine biraz metin eklemeyi dene:

<div class="div-1">Mavi</div>
<div class="div-2">Kırmızı</div>
<div class="div-3">Sarı</div>

Dosyanı kaydet ve tarayıcında yeniden aç.
Artık her bir <div> kutusunun içinde metinlerin göründüğünü fark edeceksin.

Kutu örneği

<div class="div-1"><h2>Mavi</h2></div>
<div class="div-2"><h3>Kırmızı</h3></div>
<div class="div-3"><h4>Sarı</h4></div>

Dosyanı kaydet ve tarayıcında yeniden aç.
Artık <div> kutularının içindeki metinler, <h1> ile <h4> etiketlerinin varsayılan özelliklerine göre biçimlendirilecek.

Kutu örneği

Fark etmişsindir, <div> elementleri konumlarını biraz değiştirdi.
Bu kayma, <h2> ile <h4> etiketlerinin varsayılan margin (kenar boşluğu) değerlerinden kaynaklanıyor.
CSS Box Model dersinde margin’leri daha detaylı öğreneceksin, şimdilik görmezden gelmen yeterli.

Eğer <div> kutularının içindeki metinleri biçimlendirmek istiyorsan, ilgili class kurallarına yazı özellikleri ekleyebilirsin.
Bunun için styles.css dosyandaki kurallara aşağıdaki gibi özellikler eklemeyi dene:

Kutu örneği

Sonuç​

Bu derste, bir <div> elementinin renk ve boyutunu nasıl biçimlendireceğini öğrendin.
Ayrıca <div> içine metin eklemeyi ve bu metni CSS kurallarıyla nasıl şekillendirebileceğini de gördün.

Gerçek bir web sitesi yapmaya başladığında, sayfa düzenini kontrol etmek için <div> elementini sık sık kullanacaksın.