CSS Başlangıç: class selector kullanımı

Bu bölümde CSS biçimlendirme kodlarından class seçicisi kullanımını inceleyeceğiz, önceki örneğimizde id seçici kullanımını incelemiştik.

class seçicisi tanımlamak için <style> etiketi içinde aşağıdaki şekilde, ismi yanına nokta koyarak tanımlıyoruz.

.mavi {
color:white;
background:blue;
}

Burada mavi class seçicisi tanımladık, içindeki kodlarda zemin rengini mavi, yazı rengini beyaz olarak tanımladık. Aşağıdaki şekilde html etiketleri içinde kullanabiliyoruz.

<h1 class="mavi"> Bu bölümde mavi class yazdık</h1>

Burada h1 etiketi için kullanımını inceledik. Örneğin <p> paragraf etiketi için ise aşağıdaki şekilde kullanıyoruz.

<p class="mavi"> Paragraf biçimlendirmesi </p>

Şimdi aşağıdaki kodları yazarak sonucu görelim.

<html>

<head>

<title>CSS Örnek4</title>

<style>

.mavi{ color:white; background:blue;}

.yesil{ color:white; background:green;}

.kirmizi{ color:white; background:red;}

</style>

</head>

<body>

<h1 class="mavi"> Bu bölümde mavi class yazdık</h1>

<h1 class="yesil"> Bu bölümde yeşil class yazdık</h1>

<h1 class="kirmizi"> Bu bölümde kırmızı class yazdık</h1>