Web Geliştirme Eğitimi – 3. Ders: CSS Temelleri ve Responsive Tasarım

[Wiston]

Dersin Amacı​

Bu derste CSS’in ne olduğunu, temel stil özelliklerini ve responsive tasarım mantığını öğreneceğiz.

CSS Nedir?​

- HTML sayfasının görünümünü değiştiren stil dilidir.
- Renk, yazı tipi, boyut, margin, padding ve layout özellikleri ayarlanabilir.
- Kurallar `selector { property: value; }` formatında yazılır.

Temel Örnek​

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  color: #333;
  margin: 0;
  padding: 0;
}
h1 {
  color: #ff6600;
  text-align: center;
}
p {
  font-size: 16px;
  line-height: 1.5;
}

Kutu Modeli (Box Model)​

- Content + padding + border + margin

div {
  width: 200px;
  padding: 10px;
  border: 2px solid #333;
  margin: 20px;
}

Responsive Tasarım (Media Query)​

@media (max-width: 768px) {
  body {
    padding: 10px;
  }
  h1 {
    font-size: 20px;
  }
}

Flexbox ile Basit Layout​

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Ödev​

1. Body arka plan rengini değiştir.
2. Başlık rengini ve hizalamasını ayarla.
3. Paragraf yazı tipi ve boyutunu değiştir.
4. Bir div kutusu oluştur ve padding, margin, border ekle.
5. Flexbox ile 3 kutuyu yatay olarak hizala.
6. Basit media query ile mobil görünümü optimize et.