Belli özelliklere sahip birden çok eleman tanımlayacaksanız veya hazırladığınız belli bir sitil kalıbını birden çok yerde kullanacaksanız bir sitil sınıfı oluşturmanız sizin açınızdan bir kolaylık olacaktır. Böylece hazırladığınız sitilin sınıf ismini belirterek istediğiniz bölüme bu sitilleri uygulayabilirsiniz.
Bir sitil sınıfı tanımlarken sınıf ismini önüne bir nokta ( . ) koyarak belirmek zorundasınız. Mesela onemli sınıfı oluşturacaksanız ve bu sınıfın uygulandığı yerlerde font büyüklüğünü ve rengini değiştirmek istediğimizi var sayarsak :
şeklinde bir ifade gereklidir. Hazırladığımız onemli sınıfını sadece <B> tagı içerisinde değil mesela herhangi bir <P> veya <DIV> tagı ile birliktede kullanabiliriz. Bu şekilde bir kullanım sadece sınıf ismi belirtilen taga etki edecek ve diğer taglara herhangi bir etki etmeyecektir. Örnek uygulamamızı yapalım :
Kod: <HTML>
<HEAD>
<TITLE> Sitillerin kullanımları </TITLE>
<STYLE>
.onemli
{
background-color : black;
color : white;
font-size:14;
font-type:verdana;
margin : 20;
border-width:1;
border-color:red;
border-style:solid;
}
.buyuk
{
background-color : yellow;
color: blue;
font-size:24;
}
</STYLE>
</HEAD>
<BODY>
<H1> Sitil uygulamaları</H1>
Bu bölümde sitil sınıflarının kullanılmasını görüyoruz.
<DIV CLASS="onemli">
<B CLASS="buyuk">S</B>ınıflar bize birden çok alana aynı
sitilleri uygulamamızda büyük kolaylıklar oluştururlar.
</DIV>
<P><SPAN CLASS="buyuk">B</SPAN>üyük kolaylıklar sağlar.
Böylece aynı özelliklere
sahip bölümler için yeni sitiller hazırlamak zorunda kalmayız.
</BODY>
</HTML>
