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çicisi, HTML öğelerini class özniteliklerinin değerine göre seçmek için kullanılır. Belgenizdeki birden fazla öğeye aynı stilleri uygulamanıza olanak tanır. Sınıf seçicileri, etiket adlarından bağımsız olarak bir grup öğeyi aynı şekilde biçimlendirmek istediğinizde özellikle kullanışlıdır.

CSS'nizde belirli bir sınıfa sahip öğeleri seçmek için bir nokta (.) ve ardından sınıf adını kullanırsınız. Sınıf seçiciyi kullanmanın temel söz dizimi şöyledir:

.classname {
    property: value;
}

Örneğin:

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

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

Görev

Kolay

Başlıklar (<h1>, <h2>), paragraflar (<p>) ve bölümler (<div>) dahil çeşitli öğeler içeren bir HTML belgesi veriliyor. Henüz hiçbirinde class yok: önce class özniteliklerini ekleyecek, ardından öğeleri sınıf seçicileriyle biçimlendireceksin. Aşağıdaki adımları izle:

<h1> öğesine ve ilk <p> öğesine "blue-text" değerine sahip bir class özniteliği ekle.
<h2> öğesine ve ikinci <p> öğesine "large-text" değerine sahip 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 yap.
"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 yap.

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>