CSS Gruplama ve Üzerine Yazma
Gruplama
Birden fazla stilde sıklıkla kullanılan CSS komutları varsa, bunları toplu olarak yazıp özelliği bir kez yazma şansına sahibiz. Buna gruplama diyoruz. Örneğe bakalım:
CSS Kodu
h1 { color: green; }
h2 { color: green; }
p { color: green; }
Yukarıda görüldüğü gibi üç element için de tek bir özellik belirtilmiş. Bu da rengin yeşil olması. Bu kodu kısaltmak için element ve stil adlarını aralara virgül gelecek şekilde sıralayabiliriz. Şöyle ki:
CSS Kodu
h1, h2, p { color: green; }
Verdiğimiz elementlerin tamamı yeşil renkli görünecektir.
Üzerine Yazma
Bazen tüm elementleri kapsayacak kodlar yazarız. Ancak bir ya da birkaç element bundan farklı olmalıdır. İşte bu durumda tüm elementlerde geçerli olan özellikleri değiştirmemiz gerekebilir.
Şu şekil bir HTML kodumuz olsun:
HTML Kodu
<p>Bu bir paragraf</p>
<p>Bu da bir paragraf ancak farklı bir stili olacak</p>
<p>Bu da bir paragraf ve 1. paragraf ile aynı olacak</p>
Tüm P elementleri için genel özellikleri belirledikten sonra, farklı olmasını istediğimiz 2. paragraf özelliklerini yeni bir stil adı oluşturarak yazıyoruz. Geriye kalan ilgili paragrafa
class="stil_adı" eklemek olacaktır.
CSS Kodu
p {
font: 10pt Tahoma;
color: gray;
}
.kirmizi p {
color: red;
}
Yukarıdaki kısım incelendiğinde tüm <P> elementleri 10 punto Tahoma ve gri olacaktır. Ancak class belirtip kirmizi yazdığımız P diğerlerinden farklı olarak kırmızı renkli olacaktır.
HTML Kodu
<p>Genel stile sahip paragraf</p>
<p class="kirmizi">Kırmızı renkli olacak paragraf</p>
<p>Diğer bir genel stile sahip paragraf</p>
UYARI: Yukarıdaki örnekte .kirmizi p yerine p.kirmizi kullanılabilir.