Bu makalede bir başlık, bir menü, bir içerik alanı ve bir alt bilgi (footer) içeren bir sayfa tasarlayacağız. Örneğimizde div yapısı ve bazı CSS özelliklerini kullanarak sayfamızı biçimlendireceğiz.
ornek.html kodlarımız:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Basit Web Sayfası</title> <link rel="stylesheet" href="styles5.css"> </head> <body> <div class="container"> <!-- Başlık --> <div class="header"> <h1>Hoş Geldiniz!</h1> </div> <!-- Menü --> <div class="menu"> <ul> <li><a href="#">Anasayfa</a></li> <li><a href="#">Hakkımızda</a></li> <li><a href="#">Hizmetler</a></li> <li><a href="#">İletişim</a></li> </ul> </div> <!-- İçerik --> <div class="content"> <h2>İçerik Başlığı</h2> <p>Bu bir örnek içerik paragrafıdır. CSS ve div kullanımını gösteriyoruz.</p> </div> <!-- Alt Bilgi --> <div class="footer"> <p>© 2023 Basit Web Sayfası</p> </div> </div> </body> </html> |
Kodlarımızı yazarak tarayıcıda açtığımızda aşağıdaki gibi bir görüntü oluşacaktır.

Şimdi CSS kodlarımızı oluşturarak biçimlendirmemizi yapalım. styles5.css dosyamıza ait kodlar:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | /* Genel stil */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; } .container { width: 80%; margin: 0 auto; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } /* Başlık */ .header { background-color: #4CAF50; color: white; padding: 20px; text-align: center; } /* Menü */ .menu { background-color: #333; overflow: hidden; } .menu ul { list-style-type: none; margin: 0; padding: 0; } .menu ul li { float: left; } .menu ul li a { display: block; color: white; text-align: center; padding: 14px 20px; text-decoration: none; } .menu ul li a:hover { background-color: #575757; } /* İçerik */ .content { padding: 20px; } /* Alt Bilgi */ .footer { background-color: #333; color: white; text-align: center; padding: 10px; position: relative; bottom: 0; width: 100%; } |
Ekran çıktımız aşağıdaki gibi olacaktır.

Açıklamalar:
div
Kullanımı:- Her bölüm (başlık, menü, içerik, alt bilgi) bir
div
içine alınmıştır. div
etiketi, sayfayı mantıksal bölümlere ayırmak için kullanılır.
- Her bölüm (başlık, menü, içerik, alt bilgi) bir
- CSS Stilleri:
header
,menu
,content
, vefooter
sınıfları ile her bölümün stilini ayrı ayrı tanımladık.float: left
ile menü öğelerini yatay hizaya getirdik.padding
vemargin
kullanarak içerikler arasında boşluklar oluşturduk.
- Responsive Tasarım:
width: 80%
vemargin: 0 auto
ile sayfanın ortalanmasını sağladık.box-shadow
ile sayfaya gölge efekti ekledik.
Şimdi CSS kodlarımızı daha detaylı açıklayalım.
1. Genel Stil (Body ve Container)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; } .container { width: 80%; margin: 0 auto; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } |
body
:font-family: Arial, sans-serif;
: Sayfanın yazı tipini Arial olarak belirler. Eğer Arial yoksa, genel sans-serif yazı tipi kullanılır.margin: 0; padding: 0;
: Sayfanın kenar boşluklarını ve iç boşluklarını sıfırlar. Bu, sayfanın tarayıcının kenarlarına yapışmasını sağlar.background-color: #f4f4f4;
: Sayfanın arka plan rengini açık gri yapar.
.container
:width: 80%;
: Sayfanın genişliğini ekranın %80’i olarak ayarlar.margin: 0 auto;
: Sayfayı yatayda ortalar.auto
, sol ve sağ kenar boşluklarını eşitler.background-color: #fff;
: İçeriğin arka plan rengini beyaz yapar.box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
: Sayfaya hafif bir gölge efekti ekler. Bu, sayfayı daha belirgin hale getirir.
2. Başlık (Header)
1 2 3 4 5 6 7 8 | .header { background-color: #4CAF50; color: white; padding: 20px; text-align: center; } |
.header
:background-color: #4CAF50;
: Başlık bölümünün arka plan rengini yeşil yapar.color: white;
: Başlık metninin rengini beyaz yapar.padding: 20px;
: Başlık bölümünün iç boşluğunu 20 piksel yapar. Bu, metnin kenarlardan uzak durmasını sağlar.text-align: center;
: Başlık metnini ortalar.
3. Menü (Menu)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | .menu { background-color: #333; overflow: hidden; } .menu ul { list-style-type: none; margin: 0; padding: 0; } .menu ul li { float: left; } .menu ul li a { display: block; color: white; text-align: center; padding: 14px 20px; text-decoration: none; } .menu ul li a:hover { background-color: #575757; } |
.menu
:background-color: #333;
: Menü bölümünün arka plan rengini koyu gri yapar.overflow: hidden;
: Menü içindeki öğelerin taşmasını engeller.
.menu ul
:list-style-type: none;
: Liste işaretlerini kaldırır (madde işaretleri veya numaralar).margin: 0; padding: 0;
: Listenin kenar boşluklarını ve iç boşluklarını sıfırlar.
.menu ul li
:float: left;
: Liste öğelerini yatay hizaya getirir. Bu, menü öğelerinin yan yana sıralanmasını sağlar.
.menu ul li a
:display: block;
: Menü bağlantılarını blok öğe yapar. Bu, tüm alanın tıklanabilir olmasını sağlar.color: white;
: Menü bağlantılarının rengini beyaz yapar.text-align: center;
: Menü bağlantılarının metnini ortalar.padding: 14px 20px;
: Menü bağlantılarının iç boşluğunu ayarlar. Dikeyde 14 piksel, yatayda 20 piksel boşluk bırakır.text-decoration: none;
: Menü bağlantılarının altındaki çizgiyi kaldırır.
.menu ul li a:hover
:background-color: #575757;
: Fare menü bağlantısının üzerine geldiğinde arka plan rengini değiştirir.
4. İçerik (Content)
1 2 3 4 5 | .content { padding: 20px; } |
.content
:padding: 20px;
: İçerik bölümünün iç boşluğunu 20 piksel yapar. Bu, metnin kenarlardan uzak durmasını sağlar.
5. Alt Bilgi (Footer)
1 2 3 4 5 6 7 8 9 10 11 | .footer { background-color: #333; color: white; text-align: center; padding: 10px; position: relative; bottom: 0; width: 100%; } |
.footer
:background-color: #333;
: Alt bilgi bölümünün arka plan rengini koyu gri yapar.color: white;
: Alt bilgi metninin rengini beyaz yapar.text-align: center;
: Alt bilgi metnini ortalar.padding: 10px;
: Alt bilgi bölümünün iç boşluğunu 10 piksel yapar.position: relative;
: Alt bilgiyi sayfanın altına sabitler.bottom: 0;
: Alt bilgiyi sayfanın en altına yerleştirir.width: 100%;
: Alt bilgi bölümünün genişliğini sayfanın tamamına yayar.
Özet:
div
etiketleri, sayfayı mantıksal bölümlere ayırmak için kullanılır.- CSS, bu bölümlerin stilini belirler (renk, yazı tipi, boşluklar, hizalama vb.).
- Responsive tasarım için
width
,margin
, vepadding
gibi özellikler kullanılır.