Seçicilere Giriş

Coddy'nin HTML Journey'sinin Styling with CSS bölümünün bir parçası — ders 10 / 76.

CSS'de, seçiciler stil vermek istediğiniz HTML öğelerini seçmek için kullanılan desenlerdir. Stillerin hangi öğelere uygulanacağını belirledikleri için CSS kurallarının kritik bir parçasıdırlar.

Her biri öğeleri farklı şekillerde hedefleyen çeşitli seçici türleri vardır. Seçicileri anlamak, CSS'de uzmanlaşmak ve iyi stillendirilmiş web sayfaları oluşturmak için temeldir.

İşte bir seçici içeren temel bir CSS kuralı:

selector {
    property: value;
}

selector: Stil verilecek HTML öğelerini hedefler.
property: Değiştirmek istediğiniz stil özniteliği (örneğin, color, font-size).
value: Özellik için ayarlamak istediğiniz değer (örneğin, blue, 16px).

Örneğin:

p {
    color: blue;
    font-size: 16px;
}

Bu örnekte, p seçicidir ve tüm paragraf öğelerini hedefler. Bildirimler, tüm paragraflar için metin rengini maviye ve yazı tipi boyutunu 16 piksele ayarlar.

Görev

Kolay

Size bir HTML belgesi verilmiştir. Belgeyi aşağıdaki özelliklerle stillendirmek için dahili CSS kullanın:

Tüm h1 başlıklarının arka plan rengini green olarak ayarlayın.
Tüm h1 başlıklarının metin rengini white olarak ayarlayın.
Tüm paragrafların (p) yazı tipi boyutunu 18px olarak ayarlayın.

Bunun için size başlangıç CSS kodu verilmiştir.

Kopya kağıdı

CSS seçiciler (selectors), stil vermek istediğiniz HTML öğelerini seçmek için kullanılan desenlerdir. Stillerin hangi öğelere uygulanacağını belirlerler.

Temel CSS kural yapısı:

selector {
    property: value;
}

selector: Stil verilecek HTML öğelerini hedefler
property: Değiştirmek istediğiniz stil niteliği (örneğin, color, font-size)
value: Özellik için ayarlamak istediğiniz değer (örneğin, blue, 16px)

Tüm paragraf öğelerini hedefleyen örnek:

p {
    color: blue;
    font-size: 16px;
}

Kendin dene

<!DOCTYPE html>
<html>
<head>
    <title>Selectors</title>
    <style>
        h1 {
            
        }
        p {
            
        }
    </style>
</head>
<body>
    <h1>John Doe</h1>
    <p>Web Developer</p>
</body>
</html>