CSS Sözdizimi (CSS Syntax)

CSS sözdizimi, stil kurallarının nasıl yazılacağını tanımlar ve oldukça basit ve anlaşılır bir yapısı vardır. CSS sözdizimi, seçiciler (selector) ve bir veya daha fazla bildirim (decleration) olmak üzere iki ana bölümden oluşur:

Yukarıdaki resmimizi analiz etmeye başlayabiliriz. CSS’de, stil uygulamak istediğimiz HTML elemanlarını “seçici” (selector) ile belirleriz. Seçiciler, stilin hangi elemanlara uygulanacağını tanımlar ve bu elemanlar HTML etiket isimleri, sınıf isimleri (class), ID’ler vb. yapılar olabilir. Daha fazla bilgi için temel seçiciler ve ileri seviye seçiciler sayfalarına bakabilirsiniz.

Her CSS kuralı bir “seçici” ve bir ya da daha fazla “bildirim” (declaration) içerir. Bildirimler sayesinde seçilen HTML elemanlarının nasıl görünmesi gerektiği belirlenir. Her bildirim, “özellik” (property) ve “değer” (value) olmak üzere iki bölümden oluşur. “Özellik“, stilin hangi yönünü değiştireceğimizi (örneğin, renk, yazı tipi, boyut) tanımlar; “değer” ise bu özelliğe atanacak spesifik bilgiyi (örneğin, kırmızı renk, 16px yazı boyutu) içerir.

Her özellik ve değeri iki nokta üst üste (:) ayırır ve her bildirimin sonuna noktalı virgül (;) eklenir. CSS sözdiziminin nasıl olduğunu şu şekilde gösterebilirim:

seçici {
    özellik1: değer1;
    özellik2: değer2;
    ...
}

Bu yapı, web geliştiricilerin sayfaların görünümünü kolaylıkla kontrol etmelerini sağlar. Örneğin, bir paragraf etiketini şu şekilde stilleyebiliriz:

p {
    color: red;
    font-size: 14px;
}

Bu örneğimizde, p etiketi seçicisini kullanarak sayfada bulunan tüm paragraf etiketlerini seçip, color özelliği red (kırmızı) olarak ve font-size özelliği 14px olacak şekilde iki bildirim uyguladık.