CSS'te Öğe Sınıfları

Önceki derslerde, sayfa öğelerini etiket adına göre seçiyorduk, örneğin tüm paragraflara aynı anda stil uyguluyorduk. Ancak bir sayfada farklı stiller uygulanması gereken farklı türde paragraflar olabilir. Bu sorunu çözmek için farklı paragrafları farklı CSS sınıflarına atayabiliriz.

Bir etiketi bir sınıfa atamak için, o etikete class özniteliğini yazmanız ve içine harfler, rakamlar, alt çizgi ve tire karakterlerinden oluşan, sizin tarafınızdan oluşturulmuş bir sınıf adı belirtmeniz gerekir.

Bir örnekle inceleyelim. İki tür sınıfa sahip paragraflar oluşturalım - eee ve zzz:

<p class="eee">
	paragraph with class eee
</p>
<p class="eee">
	paragraph with class eee
</p>
<p class="zzz">
	paragraph with class zzz
</p>
<p class="zzz">
	paragraph with class zzz
</p>

Şimdi CSS'te farklı sınıflara sahip paragraflara erişelim ve onlara bazı stiller uygulayalım. Örneğin, zzz sınıfına sahip paragrafları kırmızı, eee sınıfına sahip paragrafları ise yeşil renge boyayalım.

Bunun için CSS dosyasında sınıflarımıza erişmemiz gerekir. Erişim şu sözdizimine sahiptir: önce bir nokta karakteri, ardından bizim belirlediğimiz sınıf adı gelir. Yani eee sınıfına erişmek için .eee, zzz sınıfına erişmek için ise .zzz yazmamız gerekir.

Şimdi anlatılanları uygulayalım. HTML'mize oluşturduğumuz sınıflar için CSS stilleri ekleyelim:

.eee {
	color: green;
}
.zzz {
	color: red;
}

Kodumuzu çalıştırırsak, sonuç şöyle olacaktır:

Aşağıdaki kod verilmiştir:

<ul>
	<li class="odd">text</li>
	<li class="eve">text</li>
	<li class="odd">text</li>
	<li class="eve">text</li>
	<li class="odd">text</li>
	<li class="eve">text</li>
</ul>

odd sınıfına sahip öğeleri kırmızı renge, eve sınıfına sahip öğeleri ise yeşil renge boyayın.

Aşağıdaki kod verilmiştir:

<h2 class="eee">Title</h2>
<p class="eee">
	paragraph
</p>
<p class="eee">
	paragraph
</p>
<p>
	paragraph without class
</p>

<ul class="eee">
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

eee sınıfına sahip tüm öğeleri kırmızı renge boyayın.

Önceki görevde, renk veren sınıf ul etiketine atanmış olmasına rağmen, neden li etiketlerinin kırmızı renge boyandığını açıklayın.