Seçicilerle Sayfa Stillendirme

Bu projede, çeşitli CSS seçicilerini kullanarak verilen bir HTML sayfasını stillendireceksiniz. Bu alıştırma, farklı seçici türlerini ve kombinasyonlarını uygulamalı olarak öğrenmenize yardımcı olacaktır.

Proje Detayları

Bu projede, çeşitli CSS seçicilerini kullanarak verilen bir HTML sayfasını stillendireceksiniz. Bu alıştırma, farklı seçici türlerini ve kombinasyonlarını uygulamalı olarak öğrenmenize yardımcı olacaktır.

Proje Adımları:

  1. Verilen HTML kodunu kullanarak bir HTML dosyası oluşturun.
  2. Bir external CSS dosyası oluşturun ve HTML dosyasına bağlayın.
  3. Element Seçici: Tüm <p> elementlerinin yazı tipini ve satır aralığını ayarlayın.
  4. ID Seçici: #page-title ID'sine sahip başlığın rengini ve alt çizgisini değiştirin.
  5. Sınıf Seçici: .highlight sınıfına sahip elementlerin arkaplan rengini değiştirin.
  6. Öznitelik Seçici: target="_blank" özniteliğine sahip linklerin yanına küçük bir ikon ekleyin (::after pseudo-elementi ile).
  7. Torun Seçici: .content sınıfı içindeki tüm <li> elementlerinin madde işaretini değiştirin.
  8. Çocuk Seçici: footer > p seçicisi ile footer'daki doğrudan paragrafın metin boyutunu küçültün.
  9. Bitişik Kardeş Seçici: h2 + p seçicisi ile bir <h2> başlığından hemen sonra gelen paragrafın üst kenar boşluğunu kaldırın.
  10. Pseudo-sınıf: Linklerin (<a>) üzerine gelindiğinde (:hover) renginin değişmesini sağlayın.
  11. Pseudo-element: Her <h2> başlığının önüne (::before) bir ikon veya emoji ekleyin.

Başlangıç HTML Kodu:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Seçici Projesi</title>
    <link rel="stylesheet" href="selectors-style.css">
</head>
<body>
    <header>
        <h1 id="page-title">CSS Seçicileri Projesi</h1>
    </header>

    <main class="content">
        <h2>Giriş</h2>
        <p>Bu sayfada çeşitli CSS seçicilerini kullanarak stillendirme yapacağız. Bu, seçicilerin nasıl çalıştığını anlamak için iyi bir pratiktir.</p>
        <p class="highlight">Bu paragraf vurgulanmalıdır.</p>

        <h2>Önemli Konular</h2>
        <p>CSS seçicileri şunları içerir:</p>
        <ul>
            <li>Temel Seçiciler (Element, Sınıf, ID)</li>
            <li>Kombinasyon Seçicileri</li>
            <li class="highlight">Pseudo-sınıflar ve Pseudo-elementler</li>
            <li>Öznitelik Seçicileri</li>
        </ul>

        <h2>Daha Fazla Bilgi</h2>
        <p>Daha fazla bilgi için aşağıdaki linkleri ziyaret edebilirsiniz:</p>
        <ul>
            <li><a href="https://developer.mozilla.org/tr/docs/Web/CSS/CSS_Selectors" target="_blank">MDN CSS Seçicileri</a></li>
            <li><a href="https://www.w3schools.com/cssref/css_selectors.asp">W3Schools CSS Seçicileri</a></li>
        </ul>
    </main>

    <footer>
        <p>Proje tamamlandı.</p>
        <p>© 2025</p>
    </footer>
</body>
</html>

Bu HTML dosyasını ve boş bir selectors-style.css dosyasını oluşturun, ardından CSS dosyasını yukarıdaki adımlara göre doldurun.