CSS ile Html sayfasındaki elemanlara stil yazarken her bir html elemanı için ayrı ayrı ID seçicileri yazmak çok anlamsız olacağı için sınıf (class) seçicileri adında bir html/css ilişkisi hazırlanmıştır. Örneğin mavi sınıfına sahip birden çok html elemanına tek seferde mavi yazı rengi vermek için aşağıdaki gibi bir html/css ikilisi kullanılabilir.
Css içerisinde bir sınıfa ait kodlamaları belirtmek için sınıf adının başına nokta (.) karakteri konur.
<head>
<meta charset="utf-8">
<title>CSS Uygulamaları</title>
<style>
.mavi {color:blue}
</style>
</head>
<body>
<p class="mavi">Mavi renkli yazı</p>
</body>
Bir html elemanı birden fazla sınıfa (class) sahip olabilir. Örneğin font kalınlıkları ve renklerine göre aşağıdaki gibi html/css sınıf kodlamaları yapılabilir.
<head>
<meta charset="utf-8">
<title>CSS Uygulamaları</title>
<style>
.mavi {color:blue}
.kalin {font-weight:bold}
</style>
</head>
<body>
<p class="mavi">Yazı 1</p>
<p class="kalin">Yazı 2</p>
<p class="mavi kalin">Yazı 3</p>
</body>
Kodlama sonucu ekran görüntüsü:
Kodlarda "mavi kalin" olarak belirtilen sınıf ile (hem mavi sınıfına sahip hem de kalin sınıfına sahip) yazı 3 yazan p etiketinin hem bold hem de mavi renkli olması sağlanmıştır.