CSS: örneklerle ilk adımlar

CSS ile ilk programın

Web sayfalarının görünüşünü belirler: renkler, yazı tipleri, boşluklar ve yerleşim. HTML sayfanın iskeletiyse CSS onun kıyafetidir. Bir programlama dili değil, bir stil dilidir. Kodu anlamak için videoyu duraklat, bir değeri değiştir ve sonucu tahmin et.

01 · İlk CSS kuralın

Bir CSS kuralında önce hangi öğeyi seçtiğini (h1), sonra süslü parantez içinde özelliği ve değerini (color: tomato;) yazarsın. Bu derslerde CSS'i etiketinin içine yazıyoruz.

<style>
  h1 {
    color: tomato;
    font-size: 40px;
  }
</style>

<h1>Merhaba CSS!</h1>

Beklenen: Domates kırmızısı renkte, büyük bir "Merhaba CSS!" başlığı görünür.

02 · Sınıflar (class) ile seçmek

Aynı türdeki öğelerden sadece bazılarını biçimlendirmek için onlara bir sınıf (class) verirsin. CSS'te sınıflar başına nokta konularak seçilir: .uyari.

<style>
  .uyari {
    background-color: #fff3cd;
    color: #8a6d3b;
    padding: 12px;
  }
</style>

<p>Normal bir paragraf.</p>
<p class="uyari">Dikkat: bu bir uyarı mesajı!</p>

Beklenen: Birinci paragraf normal görünür; ikincisi açık sarı zeminli, kahverengi yazılı bir uyarı kutusu olur.

03 · Renkler ve yazı tipleri

Renkler isimle (tomato), onaltılık kodla (#333333) ya da rgb() ile yazılabilir. font-family yazı tipini, font-size yazı boyutunu, line-height satır aralığını belirler.

<style>
  body {
    font-family: Arial, sans-serif;
    background-color: #f0f4ff;
  }
  p {
    color: #333333;
    font-size: 18px;
    line-height: 1.6;
  }
  strong {
    color: rgb(99, 102, 241);
  }
</style>

<p>CSS ile <strong>renkleri</strong> ve yazı tiplerini değiştirebilirsin.</p>

Beklenen: Açık mavi zemin üzerinde Arial yazı tipiyle koyu gri bir paragraf; "renkleri" kelimesi mor ve kalın görünür.

04 · Kutu modeli: padding, border, margin

Sayfadaki her öğe bir kutudur. padding içerik ile kenarlık arasındaki iç boşluk, border kenarlık, margin kutunun dışındaki boşluktur. Bunları bir tablodaki resim, paspartu ve çerçeve gibi düşünebilirsin.

<style>
  .kutu {
    width: 200px;
    padding: 20px;
    border: 3px solid #6366f1;
    margin: 30px;
    background-color: #eef2ff;
  }
</style>

<div class="kutu">Ben bir kutuyum</div>

Beklenen: Kenarlardan 30 piksel içeride, mor kenarlıklı, içi açık mor ve yazısı kenarlardan 20 piksel uzakta duran bir kutu görünür.

05 · Flexbox ile yan yana dizmek

display: flex içindeki öğeleri yan yana dizer. gap aralarındaki boşluğu, justify-content: center ortalamayı sağlar. border-radius köşeleri yuvarlar.

<style>
  .menu {
    display: flex;
    gap: 12px;
    justify-content: center;
  }
  .menu a {
    background-color: #6366f1;
    color: white;
    padding: 8px 16px;
    border-radius: 999px;
    text-decoration: none;
  }
</style>

<nav class="menu">
  <a href="#">Ana Sayfa</a>
  <a href="#">Diller</a>
  <a href="#">Araçlar</a>
</nav>

Beklenen: Ortada yan yana duran, yuvarlak köşeli üç mor menü butonu görünür.

06 · Hover ve geçiş efektleri

:hover fare öğenin üzerine geldiğinde uygulanacak stilleri belirler. transition değişimin aniden değil, yumuşakça olmasını sağlar.

<style>
  .buton {
    background-color: #6366f1;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    transition: transform 0.2s, background-color 0.2s;
  }
  .buton:hover {
    background-color: #4338ca;
    transform: scale(1.1);
  }
</style>

<button class="buton">Üzerime gel</button>

Beklenen: Mor bir buton görünür; fareyle üzerine gelince koyulaşır ve hafifçe büyür.

07 · Sıra sende

Örneklerden birini seç. Bir girdiyi veya koşulu değiştir. Önce beklediğin sonucu yaz, sonra çalıştır. Hata varsa mesajı ve satırı incele. Yazılı rehberdeki “Kendin dene” alanıyla devam edebilir, ardından ayrı testte eksiklerini görebilirsin.