Sınıf seçiciler
Coddy'nin CSS Seçicileri kursunda ders 4 / 15.
Sınıf seçici (class selector), belirli bir sınıf özniteliğine sahip öğeleri seçen bir CSS seçici türüdür. Sınıf özniteliği, HTML öğelerini bir araya getirmek için ekleyebileceğiniz özel bir özniteliktir.
Belirli bir sınıfa sahip öğeleri seçmek için, sınıf adından önce bir nokta (.) kullanırsınız. Örneğin, .my-class seçicisi, my-class sınıfına sahip tüm öğeleri seçer.
Bir web sayfasını stillendirmek için sınıf seçicinin nasıl kullanılacağına dair bir örnek:
.my-class {
color: red;
font-size: 2em;
}Bir öğeye sınıf eklemek için şunu yazın:
<div class="my-class"></div>Bu CSS kuralı, my-class sınıfına sahip tüm öğeleri kırmızı renkte ve 2em yazı boyutunda olacak şekilde stillendirecektir.
Görev
Kolay- Üç adet
h1öğesi içeren bir web sayfası oluşturun. - İlk
h1öğesine bir sınıf ekleyin. - İkinci
h1öğesine başka bir sınıf ekleyin. - İlk
h1öğesini red yapacak ve 64px yazı tipi boyutuna sahip olacak şekilde stillendirmek için bir CSS sınıf seçicisi kullanın. - Başka bir
h1öğesini blue yapacak ve 32px yazı tipi boyutuna sahip olacak şekilde stillendirmek için başka bir CSS sınıf seçicisi kullanın.
Kendin dene
<html>
<head>
<title>Class Selector Exercise</title>
<style>
/* CSS Code goes here */
</style>
</head>
<body>
</body>
</html>