Sınıf Seçici

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

Sınıf seçicisi (class selector), HTML öğelerini class özniteliğinin 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 stillendirmek istediğinizde özellikle yararlı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, .highlight sınıf seçicisi "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

Size, 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 öğelerin bazılarının bir class özniteliği vardır. Göreviniz, bu öğeleri stillendirmek için sınıf seçicileri kullanmaktır. Aşağıdaki adımları izleyin:

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

Kopya kağıdı

Sınıf seçici (class selector), HTML öğelerini class özniteliği değerine göre hedefler. Sınıf adından önce bir nokta (.) kullanın:

.classname {
    property: value;
}

Örnek:

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

Bu, class="highlight" olan tüm öğeleri hedefler ve belirtilen stilleri uygular.

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>