CSS’de tüm komutlar belirli bir düzene göre sıralanır. Genel olarak iki bölüme ayrılır. Birincisi en solda bulunan kuralı uygulayacağımız elementtir. Buna seçici (selector) denir.
CSS’nin temel yapısında bir diğer özellik de bildirim bloğu (declaration)’dur. Bildirim bloğu süslü bir parantez ile açılır; benzer şekilde noktalı virgülün ardından süslü parantez ile kapanır.
Bildirim bloğunda “seçici” için istediğimiz kadar “özellik” ve “değer” atayabiliriz. Birkaç örnek vermek gerekirse;
Tek bir özellik:
H1 {font-family: Arial}
Birden fazla özellik:
H1 {font-family: Arial; font-size: 2; font-weight: bold; color: red;}
Yukarıdaki CSS kod dizilimini açıklayalım;
H1, seçici özelliktir; genellikle yazı/paragraf başlıklarını tanımlamak için kullanılan bir tür HTML kodudur. H1 kodunu kullandığımız satırlarda yer alan yazılar bildirim bloğunda bulunan özelliklere göre şekillenecektir.
Seçicinin ardından süslü parantez açıyoruz. Özellik ve değerler arasında iki nokta üst üste [:] işareti yer alır. Her bir değerin sonuna noktalı virgül [;] gelmelidir.
Seçici için tanımlayacağımız yazı tipi, yazı boyutu, kalınlık/italic ve renk gibi özellikleri her bir satırda belirtiyoruz. Ardından bildirim bloğunu süslü parantez ile kapatıyoruz.
Bu satırda kullandığımız özellikler:
font-family (yazı tipi)
font-size (yazı boyutu)
font-weight (kalın, italic, altı çizili yazı)
color (yazı rengi)
CSS kod diziliminde her bir özelliği aynı satıra yerleştirmek zorunluluğu yoktur. Yukarıda verdiğimiz örnekte yer alan özellikleri aşağıdaki gibi birden fazla satıra yayabiliriz:
H1 {
font-family: Arial;
font-size: 2;
font-weight: bold;
color: red;
}