Sınıf Seçicisi

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

Sınıf seçici, HTML öğelerini class özniteliklerinin değerine göre seçmek için kullanılır. Belgenizdeki birden çok öğeye aynı stilleri uygulamanıza olanak tanır. Sınıf seçiciler, etiket adlarından bağımsız olarak bir öğe grubunu aynı şekilde biçimlendirmek istediğinizde özellikle kullanışlıdır.

CSS'inizde belirli bir sınıfa sahip öğeleri hedeflemek için, sınıf adından önce bir nokta (.) kullanırsınız. İşte bir sınıf seçiciyi kullanmak için temel sözdizimi:

.classname {
    property: value;
}

Örneğin:

.highlight {
    background-color: yellow;
    color: black;
}

Bu örnekte, sınıf seçicisi .highlight, "highlight" sınıfına sahip tüm öğeleri hedefler. Bildirimler, bu öğeler için arka plan rengini sarı ve metin rengini siyah olarak ayarlar.

Görev

Kolay

Sana başlıklar (<h1>, <h2>), paragraflar (<p>) ve bölümler (<div>) dahil olmak üzere çeşitli öğeler içeren bir HTML belgesi verilmiştir. Bu öğelerden bazılarında bir class özniteliği vardır. Görevin, bu öğeleri biçimlendirmek için sınıf seçicilerini kullanmaktır. Aşağıdaki adımları izle:

<h1> öğesine ve ilk <p> öğesine değeri "blue-text" olan bir class özniteliği ekle.
<h2> öğesine ve ikinci <p> öğesine değeri "large-text" olan bir class özniteliği ekle.
"blue-text" sınıfına sahip tüm öğeleri hedefleyen, sınıf seçicisi kullanan bir CSS kuralı yaz. Bu öğelerin metin rengini mavi olarak ayarla.
"large-text" sınıfına sahip tüm öğeleri hedefleyen, sınıf seçicisi kullanan bir CSS kuralı yaz. Bu öğelerin yazı tipi boyutunu 24 piksel olarak ayarla.

Kendin dene

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