ID Seçicisi

Coddy'nin HTML Journey'sinin CSS ile Stil Verme bölümünün bir parçası. Ders 13 / 76.

ID seçici, bir HTML öğesini id özniteliğinin değerine göre hedeflemek için kullanılır. Birden fazla öğeyi stillendirmek için kullanılabilen sınıf seçicilerin aksine, ID seçiciler benzersizdir ve bir sayfada yalnızca tek bir öğeye uygulanabilir. Bu, onları başka hiçbir öğeye uygulanmaması gereken belirli stillere sahip bireysel öğeleri stillendirmek için kullanışlı kılar.

CSS'inizde belirli bir ID'ye sahip bir öğeyi hedeflemek için, ID değerinden önce bir diyez sembolü (#) kullanırsınız. İşte bir ID seçici kullanmak için temel sözdizimi:

#idname {
    property: value;
}

Örneğin:

#intro {
    color: blue;
    font-size: 20px;
}

Bu örnekte, ID seçicisi #intro, ID'si "intro" olan öğeyi hedefler. Bildirimler, bu öğe için metin rengini maviye ve yazı tipi boyutunu 20 piksele ayarlar.

Görev

Kolay

Bir başlık (<h1>), bir paragraf (<p>) ve bir bölüm (<div>) dahil olmak üzere çeşitli öğeler içeren bir HTML belgeniz var. Göreviniz, bir bölüm öğesine stil vermek için bir ID seçicisi kullanmaktır. Aşağıdaki adımları izleyin:

<div> öğesine değeri "special" olan bir id özniteliği ekleyin.
ID'si "special" olan öğeyi hedefleyen bir ID seçicisi kullanarak bir CSS kuralı yazın. Bu öğenin arka plan rengini sarı, metin rengini ise kırmızı olarak ayarlayın.

Kendin dene

<html>
<head>
    <title>ID Selector</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a main heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>