CSS öğrenmeye başlayan geliştiricilerin karşılaştığı ilk örneklerden biri, bir HTML öğesinin rengini veya yazı boyutunu değiştiren basit bir CSS kuralıdır. Çoğu öğretici kaynak, kullanılacak kodu gösterdikten sonra doğrudan farklı CSS özelliklerini anlatmaya geçer. Böylece okuyucu kısa sürede çalışan kodlar yazabilir; ancak yazdığı kuralın neden belirli bir yapıya sahip olduğunu her zaman öğrenemez.

Bir CSS kuralında seçicinin neden süslü parantezlerden önce yazıldığı, özellik ile değerin neden iki noktayla ayrıldığı veya bildirimin sonunda neden noktalı virgül kullanıldığı çoğu zaman üzerinde durulmadan geçilen ayrıntılardır. Oysa bu işaretlerin hiçbiri yalnızca kodu düzenli göstermek amacıyla kullanılmaz. Her biri, CSS söz diziminin bir parçasıdır ve tarayıcıya kodun nasıl yorumlanması gerektiği konusunda belirli bir bilgi verir.

Hazır bir CSS örneğini kopyalamak ile CSS kuralının nasıl oluşturulduğunu anlamak aynı şey değildir. Kullanılan sözcüklerin ve işaretlerin görevleri bilinmediğinde, kodlar çoğunlukla ezberlenen kalıplara dönüşür. Bu durumda geliştirici, daha önce gördüğü bir örneği yeniden yazabilir; ancak yapı değiştiğinde veya söz diziminde bir hata oluştuğunda sorunun kaynağını belirlemekte zorlanabilir.

CSS kuralları rastgele bir yazım düzenine sahip değildir. Tarayıcı; seçiciyi, bildirim bloğunu, özelliği ve değeri birbirinden ayırabilmek için CSS tarafından tanımlanan belirli kurallardan yararlanır. Süslü parantezler, iki nokta ve noktalı virgül gibi işaretler de bu yapının sınırlarını belirler. Başka bir ifadeyle tarayıcı, yazılan CSS kodunu görünüşüne göre değil, söz dizimindeki bölümlere ve bu bölümlerin birbirleriyle kurduğu ilişkiye göre anlamlandırır.

Bu makalede CSS özelliklerinin nasıl kullanıldığını veya seçici türlerinin neler olduğunu anlatmayacağız. Bunun yerine söz dizimi kavramını, temel bir CSS kuralının hangi bölümlerden oluştuğunu, kullanılan işaretlerin ne anlama geldiğini ve tarayıcıların bu yapıyı nasıl yorumladığını ele alacağız. Çünkü CSS’i doğru öğrenmenin ilk adımı, yalnızca çalışan kodlar yazmak değil; yazılan kodun neden o biçimde oluşturulduğunu anlamaktır.

Söz Dizimi (Syntax) Nedir?

Söz dizimi, bir dilde anlamlı ve geçerli ifadelerin hangi kurallara göre oluşturulacağını belirleyen yapıdır. Kullanılan sözcüklerin hangi sırayla yazılacağı, ifadelerin birbirinden nasıl ayrılacağı ve özel işaretlerin nerede kullanılacağı söz dizimi kurallarıyla belirlenir. Bu nedenle bir dili öğrenmek, yalnızca o dilde kullanılan sözcükleri bilmekten ibaret değildir. Bu sözcüklerin ve işaretlerin nasıl bir araya getirileceğini de öğrenmek gerekir.

İnsanların kullandığı doğal dillerde olduğu gibi yazılım geliştirmede kullanılan dillerde de belirli bir düzen bulunur. Bir cümlede sözcüklerin yerleri rastgele değiştirildiğinde anlatım bozulabilir veya cümle anlamını kaybedebilir. Benzer şekilde kod içerisindeki bir sözcüğün, işaretin ya da bölümün yanlış yerde kullanılması da tarayıcının veya ilgili yazılımın ifadeyi doğru yorumlayamamasına neden olabilir.

Ancak bilgisayarların kodları yorumlama biçimi, insanların doğal dilleri anlamlandırma biçiminden farklıdır. İnsanlar, eksik veya hatalı kurulmuş bir cümlenin ne anlatmak istediğini çoğu zaman bağlamdan hareketle tahmin edebilir. Tarayıcılar ise karşılaştıkları kodları önceden tanımlanmış kurallara göre ayrıştırır. Yazılan ifade bu kurallara uymadığında tarayıcı, geliştiricinin ne yapmak istediğini tahmin etmek yerine kodu geçersiz kabul edebilir veya yorumlayamadığı bölümü yok sayabilir.

Bu durum, söz diziminin yalnızca biçimsel bir yazım tercihi olmadığını gösterir. Kodun alt alta veya yan yana yazılması çoğu zaman okunabilirlikle ilgili bir tercih olabilir; ancak iki nokta, noktalı virgül ve süslü parantez gibi işaretlerin görevleri doğrudan dilin yapısıyla ilgilidir. Bu işaretlerden birinin kaldırılması ya da yanlış yerde kullanılması, ifadenin tarayıcı açısından taşıdığı anlamı değiştirebilir.

Her dilin kendine özgü söz dizimi kuralları vardır. Bir dilde geçerli olan yazım biçimi, başka bir dilde aynı görevi yerine getirmeyebilir. Bu nedenle geliştiricinin daha önce başka bir dil öğrenmiş olması, yeni karşılaştığı dilin kurallarını kendiliğinden bildiği anlamına gelmez. Temel düşünceler birbirine benzese bile bu düşüncelerin kod içerisinde nasıl ifade edildiği, kullanılan dilin söz dizimine göre değişir.

CSS de web sayfalarının görsel sunumunu tanımlayan standart bir stil dili olarak kendine özgü söz dizimi kurallarına sahiptir. Tarayıcının bir CSS kuralını anlayabilmesi için seçicinin, bildirim bloğunun, özelliğin ve değerin beklenen yapıya uygun biçimde yazılması gerekir. Bu bölümleri birbirinden ayıran işaretler de CSS söz diziminin ayrılmaz parçalarıdır.
CSS’in hangi ihtiyaç sonucunda geliştirildiğini ve web standartları içerisindeki yerini daha ayrıntılı öğrenmek içinCSS Neden Ortaya Çıktı?” başlıklı makalemizi inceleyebilirsiniz.
Örneğin temel bir CSS kuralı şu yapıya sahiptir:

seçici {
özellik: değer;
}

Bu gösterimde kullanılan sözcükler, gerçek bir CSS kuralının hangi bölümlerden oluştuğunu temsil eder. seçici, kuralın hangi öğeyle ilişkilendirileceğini; özellik, öğenin hangi yönünün ele alındığını; değer ise bu özelliğin nasıl uygulanacağını bildirir. Süslü parantezler, iki nokta ve noktalı virgül de bu bölümlerin başlangıçlarını, sınırlarını ve bitişlerini belirler.

Burada dikkat edilmesi gereken önemli nokta, söz diziminin yalnızca hangi sözcüklerin kullanılacağını değil, bu sözcükler arasındaki ilişkinin nasıl kurulacağını da belirlemesidir. CSS içerisinde geçerli bir özellik adı ve bu özelliğin kabul ettiği geçerli bir değer kullanılmış olsa bile bunlar yanlış sırada yazılır veya aralarındaki iki nokta kaldırılırsa ortaya geçerli bir bildirim çıkmaz. Başka bir ifadeyle doğru parçaların kullanılması, tek başına doğru bir CSS kuralı oluşturmak için yeterli değildir; bu parçaların CSS’in beklediği yapıya göre bir araya getirilmesi gerekir.

Söz dizimini öğrenmek, kod kalıplarını ezberlemekten bu noktada ayrılır. Ezberlenen bir kalıp, yalnızca daha önce görülen örneklerin tekrar edilmesini sağlayabilir. Söz dizimi anlaşıldığında ise geliştirici, karşılaştığı bir CSS kuralını bölümlerine ayırabilir, kullanılan işaretlerin görevlerini belirleyebilir ve yeni kuralların hangi temel yapı üzerine kurulduğunu anlayabilir.

Dolayısıyla CSS öğrenirken yalnızca hangi özelliklerin hangi sonuçları oluşturduğuna bakmak yeterli değildir. Öncelikle bu özelliklerin bir CSS kuralı içerisinde nasıl tanımlandığını ve tarayıcının yazılan ifadeyi hangi kurallara göre okuduğunu anlamak gerekir. Bu temel kurulduğunda, ilerleyen konularda ele alınacak seçiciler, özellikler ve değerler birbirinden bağımsız kod parçaları olmaktan çıkar; CSS’in ortak söz dizimi içerisinde anlam kazanan bölümlere dönüşür.

Bir CSS Kuralının Temel Yapısı

CSS, web sayfasındaki öğelerin nasıl sunulacağını tanımlayan kurallardan oluşur. Bu kurallar, tarayıcıya bir öğenin yalnızca hangi görsel özelliğe sahip olacağını değil, tanımlanan görünümün hangi öğelere uygulanacağını da bildirir. Bu nedenle temel bir CSS kuralında hedef ile uygulanacak bildirimlerin birbirinden ayrılması gerekir.

Bir CSS kuralının genel yapısı şu şekilde gösterilebilir:

seçici {
özellik: değer;
}

Bu gösterim doğrudan kullanılabilecek gerçek bir CSS kodu değildir. Buradaki seçici, özellik ve değer ifadeleri, bir CSS kuralında bulunması gereken bölümleri temsil eder. Gerçek bir kural yazılırken bu ifadelerin yerine tarayıcının tanıdığı seçiciler, CSS özellikleri ve bu özelliklere uygun değerler kullanılır.

Örneğin bir sayfadaki ikinci düzey başlıkların metin rengini belirlemek için şu CSS kuralı yazılabilir:

h2 {
color: darkblue;
}

Bu örnekte h2, kuralın ilişkilendirileceği HTML öğelerini belirtir. Süslü parantezlerin içerisinde bulunan color: darkblue; ifadesi ise bu öğelere uygulanacak bildirimi oluşturur. Tarayıcı bu kuralı okuduğunda, sayfadaki h2 öğelerini bulur ve bu öğelerin metin rengini koyu mavi olarak tanımlar.

Temel bir CSS kuralı, seçici ve bildirim bloğu olmak üzere iki ana bölümden oluşur. Seçici, kuralın hangi HTML öğeleri için tanımlandığını belirler. Bildirim bloğu ise seçilen öğelere uygulanacak görsel kuralları içerir. Böylece tarayıcı, hedef alınan öğeler ile bu öğeler üzerinde yapılacak değişiklikler arasında ilişki kurabilir.

Örneği iki ana bölüme ayırdığımızda yapı daha açık biçimde görülebilir:

h2 /* Seçici */
{
color: darkblue;
} /* Bildirim bloğu */

Buradaki açıklamalar yalnızca bölümleri görünür hâle getirmek için kullanılmıştır. CSS kuralının kendisi, seçicinin ardından gelen ve süslü parantezlerle sınırlandırılan bildirim bloğundan meydana gelir. Seçici ile bildirim bloğu birbirinden bağımsız değildir; blok içerisindeki bütün bildirimler, kendisinden önce yazılan seçiciyle ilişkilendirilir.

Bildirim bloğunun içerisinde yer alan color: darkblue; ifadesine bildirim adı verilir. Bir bildirim, özellik ve değer olmak üzere iki temel parçadan oluşur. Bu örnekte color özelliği, darkblue ise bu özelliğe verilen değerdir. Özellik, HTML öğesinin hangi görsel yönünün tanımlandığını; değer ise bu tanımlamanın nasıl uygulanacağını belirtir.

Bir bildirim bloğunda yalnızca bir bildirim bulunması zorunlu değildir. Aynı seçiciyle ilişkilendirilecek birden fazla bildirim, aynı blok içerisinde yazılabilir:

h2 {
color: darkblue;
text-align: center;
}

Bu örnekte her iki bildirim de h2 seçicisiyle ilişkilidir. Tarayıcı, color: darkblue; bildirimini okuduktan sonra aynı blok içerisindeki text-align: center; bildirimini de değerlendirir. Böylece aynı HTML öğeleri için birden fazla görsel özellik, tek bir CSS kuralı içerisinde tanımlanabilir.

Burada CSS kuralı ile CSS bildirimi arasındaki farkı doğru anlamak önemlidir. color: darkblue; tek başına bir bildirimdir. h2 seçicisi ve bu bildirimi çevreleyen blok bir araya geldiğinde ise CSS kuralı oluşur. Başka bir ifadeyle bildirim, kuralın içerisinde yer alan bir parçadır; kuralın tamamı değildir.

Temel yapıyı daha açık biçimde şu şekilde ifade edebiliriz:

seçici {
bildirim;
}

Bildirimin kendi iç yapısı ise şöyledir:

özellik: değer;

Bu iki yapı bir araya geldiğinde tarayıcının yorumlayabileceği temel CSS kuralı ortaya çıkar. Seçici hedefi belirler, bildirim bloğu o hedef için tanımlanan kuralları bir arada tutar ve her bildirim bir özellik ile bu özelliğe verilen değeri ilişkilendirir.

CSS Kuralını Oluşturan Bölümler Ne Anlama Gelir?

Bir CSS kuralı; sözcükler, değerler ve bunları birbirinden ayıran özel işaretlerden oluşur. Bu parçaların her biri, tarayıcının karşılaştığı kodu doğru biçimde ayrıştırabilmesi için belirli bir görev üstlenir. Bir parçanın eksik veya yanlış konumda bulunması, yazılan ifadenin geçerli bir CSS kuralı olarak yorumlanmasını engelleyebilir.

CSS bildirimlerinin özellik ve değerlerden oluşan temel yapısı, MDN Web Docs tarafından hazırlananCSS söz dizimi kaynağında da ayrıntılı olarak açıklanmaktadır.

Aşağıdaki CSS kuralında yapıyı oluşturan bütün temel parçalar yer almaktadır:

article {
line-height: 1.6;
background-color: #f5f5f5;
}

Seçici

CSS kuralının süslü parantezlerden önce bulunan bölümüne seçici adı verilir. Örnekteki seçici article ifadesidir:

article

Seçici, bildirim bloğunda bulunan kuralların hangi HTML öğeleriyle ilişkilendirileceğini belirtir. Tarayıcı article ifadesini okuduğunda, HTML belgesindeki ilgili öğeleri belirler ve süslü parantezler içerisinde tanımlanan bildirimleri bu öğeler için değerlendirir.

Seçicinin görevi, doğrudan bir görsel özellik tanımlamak değildir. Seçici yalnızca CSS kuralının hedefini belirler. Öğeye uygulanacak görsel tanımlar ise seçiciden sonra gelen bildirim bloğunun içerisinde bulunur.

Açılış ve Kapanış Süslü Parantezleri

Seçiciden sonra kullanılan { işareti, bildirim bloğunun başladığını gösterir. Bloğun sonunda bulunan } işareti ise ilgili seçiciye ait bildirimlerin tamamlandığını belirtir:

article {

}

Süslü parantezler, hangi bildirimlerin seçiciyle ilişkilendirileceğini belirleyen sınırları oluşturur. Açılış süslü parantezinden önce yer alan ifade seçici, iki süslü parantez arasında kalan ifadeler ise seçiciye ait bildirimler olarak değerlendirilir.

Tarayıcı kapanış süslü paranteziyle karşılaştığında ilgili CSS kuralının sona erdiğini anlar. Kapanış işaretinden sonra başlayan başka bir seçici ve bildirim bloğu, ayrı bir CSS kuralı olarak yorumlanır.

Bildirim Bloğu

Açılış ve kapanış süslü parantezlerinin arasında kalan alana bildirim bloğu adı verilir:

{
line-height: 1.6;
background-color: #f5f5f5;
}

Bildirim bloğu, seçilen HTML öğelerine uygulanacak tanımları bir arada tutar. Bir bildirim bloğunda tek bir bildirim bulunabileceği gibi birden fazla bildirim de yer alabilir.

Örnekte line-height: 1.6; ve background-color: #f5f5f5; olmak üzere iki bildirim bulunmaktadır. Her iki bildirim de aynı blok içerisinde yer aldığı için article seçicisiyle ilişkilendirilir.

Bildirim

Bir CSS özelliği ile bu özelliğe verilen değerin oluşturduğu ifadeye bildirim adı verilir. Örnekteki ilk bildirim şöyledir:

line-height: 1.6;

İkinci bildirim ise şu şekilde yazılmıştır:

background-color: #f5f5f5;

Her bildirim, seçilen HTML öğesinin belirli bir yönü hakkında tarayıcıya ayrı bir tanım sunar. Aynı blok içerisinde bulunan bildirimler ortak bir seçiciye bağlıdır; ancak her biri kendi özelliği ve değeri bakımından ayrı ayrı değerlendirilir.

Bir bildirimin temel yapısı şu şekilde gösterilebilir:

özellik: değer;

Bu yapıda özellik ile değer iki noktayla ayrılır ve bildirim noktalı virgülle tamamlanır.

Özellik

Bildirimin iki noktadan önce bulunan bölümüne özellik adı verilir. Örnekte line-height ve background-color ifadeleri birer CSS özelliğidir:

line-height
background-color

Özellik, seçilen HTML öğesinin hangi yönünün tanımlandığını belirtir. line-height satır yüksekliğiyle, background-color ise arka plan rengiyle ilgili bir tanım yapılacağını tarayıcıya bildirir.

Tarayıcı, karşılaştığı özellik adını tanıdığı CSS özellikleriyle karşılaştırır. Özellik adı geçerliyse ardından gelen değeri bu özelliğin kuralları içerisinde değerlendirir. Yanlış yazılan veya tarayıcı tarafından tanınmayan bir özellik adı ise geçerli bir CSS özelliği olarak işleme alınamaz.

İki Nokta

CSS bildiriminde özellik ile değer arasında : işareti kullanılır:

line-height: 1.6;

İki nokta, özellik adının tamamlandığını ve bundan sonra bu özelliğe verilecek değerin başladığını gösterir. Tarayıcı line-height ifadesinin ardından iki noktayla karşılaştığında özellik bölümünü tamamlar ve sonraki ifadeyi değer olarak okumaya başlar.

İki nokta kullanılmadığında özellik ile değer arasındaki yapısal sınır ortadan kalkar:

line-height 1.6;

Bu ifade, geçerli bir özellik adı ve değer içeriyor gibi görünse de CSS bildirim söz dizimine uymaz. Tarayıcı, iki bölüm arasındaki ilişki doğru biçimde kurulmadığı için bildirimi geçerli olarak yorumlayamaz.

Değer

İki noktadan sonra başlayan ve noktalı virgüle kadar devam eden bölüm değer olarak adlandırılır. Örnekte 1.6, line-height özelliğinin; #f5f5f5 ise background-color özelliğinin değeridir:

line-height: 1.6;
background-color: #f5f5f5;

Değer, ilgili özelliğin nasıl uygulanacağını belirtir. Tarayıcı değeri tek başına değerlendirmez; kendisinden önce bulunan özellik ile birlikte ele alır. Bu nedenle bir değerin geçerli olup olmadığı, ilişkilendirildiği özelliğe göre belirlenir.

CSS özellikleri farklı türde değerler kabul edebilir. Ancak söz dizimi bakımından değerin temel konumu değişmez: Özellikten ve iki noktadan sonra yazılır, bildirimin sonuna kadar devam eder.

Noktalı Virgül

CSS bildirimlerinin sonunda ; işareti kullanılır:

line-height: 1.6;

Noktalı virgül, bildirimin sona erdiğini belirtir. Tarayıcı bu işarete ulaştığında özellik ve değer arasındaki tanımın tamamlandığını anlar. Noktalı virgülden sonra aynı bildirim bloğu içerisinde yeni bir özellik yazılabilir.

Bu işaret, birden fazla bildirimin bulunduğu bloklarda bildirim sınırlarının belirlenmesini sağlar:

article {
line-height: 1.6;
background-color: #f5f5f5;
}

İlk noktalı virgül, line-height: 1.6 bildiriminin bittiğini gösterir. Tarayıcı bundan sonra gelen background-color ifadesini yeni bir özelliğin başlangıcı olarak değerlendirir.

Bildirim bloğundaki son bildirimin ardından noktalı virgül kullanılmadığında CSS kuralı bazı durumlarda yine geçerli kabul edilebilir:

article {
line-height: 1.6;
background-color: #f5f5f5
}

Bunun nedeni, kapanış süslü parantezinin aynı zamanda bildirim bloğunun sona erdiğini göstermesidir. Bununla birlikte her bildirimi noktalı virgülle tamamlamak, söz diziminin tutarlı olmasını sağlar ve bloğa yeni bir bildirim eklendiğinde önceki bildirimin yanlışlıkla devam etmesini önler.

Bir CSS kuralında seçici hedefi belirler, süslü parantezler bildirim bloğunun sınırlarını oluşturur, özellik neyin tanımlandığını bildirir ve değer bu tanımın nasıl uygulanacağını belirtir. İki nokta özellik ile değer arasındaki ilişkiyi kurarken noktalı virgül bildirimin tamamlandığını gösterir. Bu parçalar birlikte kullanıldığında tarayıcının ayrıştırabileceği geçerli bir CSS kuralı meydana gelir.

Tarayıcı Bir CSS Kuralını Nasıl Yorumlar?

Tarayıcıya ulaşan CSS kodu, doğrudan ekranda görünen renk, boyut veya yerleşim bilgisine dönüşmez. Öncelikle kodun CSS söz dizimine uygun olup olmadığı incelenir, ardından kurallar kendi bölümlerine ayrılır ve hangi HTML öğeleriyle ilişkilendirileceği belirlenir. Tarayıcı ancak bu işlemler tamamlandıktan sonra ilgili görsel tanımları sayfaya uygulayabilir.

Aşağıdaki HTML öğesi ile CSS kuralını ele alalım:

<h1>CSS Söz Dizimi</h1>
h1 {

color: #8b0000;
font-weight: 700;
}

Tarayıcının elinde başlangıçta birbirinden ayrı iki kaynak bulunur. HTML belgesi sayfanın yapısını, CSS kodu ise bu yapının nasıl sunulacağını tanımlar. Tarayıcının görevi, HTML içerisindeki öğelerle CSS kuralları arasında doğru ilişkiyi kurmaktır.

CSS Kodunun Ayrıştırılması

Tarayıcı, CSS kodunu okurken karşılaştığı karakterleri ve işaretleri söz dizimi kurallarına göre değerlendirir. h1 ifadesinin ardından açılış süslü parantez geldiği için bu ifade seçici olarak yorumlanır. Süslü parantezin açılmasıyla birlikte seçiciye ait bildirim bloğunun başladığı anlaşılır.

Bildirim bloğu içerisinde color ifadesinin ardından iki nokta gelmesi, bunun bir özellik adı olduğunu gösterir. İki noktadan sonra bulunan #8b0000 ifadesi ise color özelliğine verilen değer olarak değerlendirilir. Noktalı virgül bildirimin tamamlandığını belirtir ve tarayıcı bundan sonra yeni bir bildirim aramaya başlar.

Aynı işlem font-weight: 700; bildirimi için de gerçekleştirilir. Kapanış süslü parantezine ulaşıldığında h1 seçicisine ait bildirim bloğunun ve dolayısıyla CSS kuralının sona erdiği anlaşılır.

Kodun bu şekilde anlamlı parçalara ayrılması işlemine ayrıştırma (parsing) adı verilir. Ayrıştırma sırasında tarayıcı yalnızca kodda hangi sözcüklerin bulunduğuna bakmaz. Sözcüklerin konumlarını, aralarındaki işaretleri ve oluşturdukları yapının CSS kurallarına uygunluğunu birlikte değerlendirir.
CSS kodlarının karakterlerden anlamlı kurallara dönüştürülmesini sağlayan ayrıştırma süreci, W3C tarafından yayımlananCSS Syntax Module Level 3 standardında teknik ayrıntılarıyla tanımlanmaktadır.

CSS Kurallarının Yapısal Hâle Getirilmesi

Geçerli CSS kuralları ayrıştırıldıktan sonra tarayıcı, bu kuralları kendi içerisinde işleyebileceği yapısal bir modele dönüştürür. Bu yapıCSS Nesne Modeli (CSSOM) olarak adlandırılır.

CSSOM, stil sayfasındaki kuralların tarayıcı tarafından düzenli bir yapı içerisinde tutulmasını sağlar. Seçiciler, bildirimler, özellikler ve değerler bu yapı içerisinde birbirleriyle ilişkili hâle getirilir. Böylece CSS kodu, tarayıcı açısından yalnızca art arda yazılmış metin olmaktan çıkar ve üzerinde işlem yapılabilen kurallar bütününe dönüşür.

Örnekteki CSS kuralı, CSSOM içerisinde genel olarak şu bilgileri temsil eder:

• Kuralın seçicisi h1 ifadesidir.
• Kuralda color özelliği #8b0000 değerine sahiptir.
• font-weight özelliğinin değeri 700 olarak tanımlanmıştır.
• Her iki bildirim de aynı seçiciyle ilişkilidir.

CSSOM’un oluşturulması, tarayıcının stil kurallarını daha sonra HTML belgesindeki öğelerle eşleştirebilmesi için gereklidir.

HTML Belgesinin Yapısal Hâle Getirilmesi

Tarayıcı, CSS kodunu ayrıştırırken HTML belgesini de kendi içerisinde işlenebilir bir yapıya dönüştürür. HTML etiketlerinden oluşturulan bu yapı Belge Nesne Modeli (DOM) olarak adlandırılır.

DOM içerisinde sayfadaki HTML öğeleri, aralarındaki üst ve alt öğe ilişkileriyle birlikte temsil edilir. Örnekte kullanılan

etiketi de DOM içerisinde bir öğe olarak yer alır. Tarayıcı böylece yalnızca sayfada bir metin bulunduğunu değil, bu metnin h1 öğesi içerisinde yer aldığını da bilir.

HTML ile CSS arasındaki ilişki, DOM ve CSSOM üzerinden kurulur. DOM sayfada hangi öğelerin bulunduğunu, CSSOM ise bu öğeler için hangi stil kurallarının tanımlandığını tarayıcıya bildirir.

Seçicinin HTML Öğesiyle Eşleştirilmesi

CSS kuralı ayrıştırıldıktan sonra tarayıcı, h1 seçicisinin HTML belgesinde hangi öğelerle eşleştiğini belirler. DOM içerisinde bulunan<h1> öğesi, CSS kuralındaki h1 seçicisiyle eşleştiği için bildirim bloğundaki değerler bu öğeyle ilişkilendirilir.

h1 {
color: #8b0000;
font-weight: 700;
}

Bu eşleştirme sonucunda tarayıcı,

öğesinin metin rengini #8b0000, yazı kalınlığını ise 700 olarak hesaplar. Sayfada birden fazla <h1> öğesi bulunması durumunda, seçiciyle eşleşen bütün öğeler aynı kuralın kapsamına girer.

Seçici hiçbir HTML öğesiyle eşleşmezse CSS kuralı geçersiz hâle gelmez. Kural tarayıcı tarafından okunup CSSOM içerisine alınabilir; ancak uygulanabileceği bir öğe bulunmadığı için sayfanın görünümünde herhangi bir sonuç oluşturmaz.

Uygulanacak Değerlerin Belirlenmesi

Bir HTML öğesi aynı anda birden fazla CSS kuralıyla eşleşebilir. Tarayıcı böyle bir durumda bütün eşleşmeleri değerlendirerek hangi bildirimin uygulanacağını belirler. CSS’in basamaklı yapısı, kuralların önceliği ve kaynak sırası bu değerlendirmede etkili olur.

Bu işlem sonucunda her öğe için kullanılacak değerler hesaplanır. Tarayıcı yalnızca geliştirici tarafından yazılan CSS kurallarını değil, tarayıcının varsayılan stillerini ve gerekli durumlarda üst öğelerden aktarılan değerleri de dikkate alır. Böylece öğenin ekranda kullanılacak son görünümü belirlenir.

Kuralın Ekrana Yansıtılması

DOM içerisindeki öğeler ile CSSOM içerisindeki kurallar eşleştirildikten sonra tarayıcı, sayfanın görsel olarak nasıl oluşturulacağını hesaplar. Öğelerin boyutları, konumları ve görsel özellikleri belirlendikten sonra sonuç ekrana çizilir.

Örnekteki

öğesi, tarayıcının gerçekleştirdiği işlemler sonucunda koyu kırmızı ve kalın bir metin olarak görüntülenir. Ekranda görülen bu sonuç, yalnızca color veya font-weight özelliklerinin varlığından kaynaklanmaz. CSS kodunun doğru ayrıştırılması, kuralın yapısal hâle getirilmesi, seçicinin HTML öğesiyle eşleştirilmesi ve uygulanacak değerlerin hesaplanması birlikte bu sonucu oluşturur.

Tarayıcının CSS kodunu yorumlaması; kodu okuma, söz dizimine göre ayrıştırma, kuralları CSSOM içerisinde düzenleme, seçicileri DOM öğeleriyle eşleştirme ve hesaplanan görünümü ekrana yansıtma işlemlerinden oluşur. Bu süreç, CSS söz dizimindeki her bölümün neden belirli bir konuma ve göreve sahip olduğunu da açıklar.

CSS Söz Dizimi Hatalı Yazılırsa Ne Olur?

Tarayıcılar, CSS kodlarını belirlenmiş söz dizimi kurallarına göre ayrıştırır. Bir CSS kuralı bu yapıya uygun yazıldığında seçici, bildirim bloğu, özellik ve değer doğru biçimde belirlenebilir. Söz dizimi bozulduğunda ise tarayıcı, hatalı ifadenin hangi görevi yerine getirdiğini anlayamayabilir.

CSS içerisindeki bir hata, çoğu zaman web sayfasının tamamen çalışmasını engellemez. Tarayıcılar, karşılaştıkları hatalı bölümü mümkün olduğunca sınırlandırmaya ve geçerli olan diğer kuralları işlemeye devam etmeye çalışır. Bu davranış, CSS’in hata toleransı olarak ifade edilebilir.

Örneğin aşağıdaki bildirim geçerli bir CSS söz dizimine sahiptir:

section {
border-color: gray;
}

Özellik ile değer arasında iki nokta bulunduğu ve bildirim noktalı virgülle tamamlandığı için tarayıcı bu yapıyı ayrıştırabilir. İki nokta kaldırıldığında ise özellik ile değer arasındaki ilişki bozulur:

section {
border-color gray;
}

border-color geçerli bir CSS özelliği, gray ise bu özellikle kullanılabilen bir değer olmasına rağmen ifade geçerli bir bildirim oluşturmaz. Tarayıcı, iki bölüm arasındaki ilişkiyi belirleyen iki nokta bulunmadığı için bu bildirimi yok sayar.

Hatalı Bir Bildirimin Yok Sayılması

Bir bildirim bloğunda hem geçerli hem de hatalı bildirimler bulunabilir:

section {
border-color gray;
background-color: white;
}

İlk bildirimde iki nokta bulunmadığı için border-color gray; ifadesi geçerli kabul edilmez. İkinci bildirim ise CSS söz dizimine uygundur. Tarayıcı ilk bildirimi uygulamaz; ancak background-color: white; bildirimini işlemeye devam eder.

Bu davranış sayesinde tek bir bildirimin hatalı olması, aynı blok içerisindeki bütün tanımların zorunlu olarak kaybedilmesine neden olmaz. Tarayıcı, noktalı virgülü kullanarak hatalı bildirimin sona erdiği yeri belirleyebilir ve ardından gelen bildirimi bağımsız olarak değerlendirebilir.

Noktalı Virgülün Unutulması

Noktalı virgül, bir bildirimin sona erdiğini ve yeni bir bildirimin başlayabileceğini belirtir. İki bildirim arasındaki noktalı virgül kaldırıldığında tarayıcı, ikinci özellik adını bir önceki değerin devamı olarak değerlendirebilir:

section {
color: black
background-color: white;
}

Tarayıcı bu kodu iki ayrı bildirim olarak okuyamaz. color özelliğinin değeri, black background-color: white biçiminde geçersiz bir yapıya dönüşür. Sonuç olarak yalnızca color bildirimi değil, onun devamı gibi görünen background-color bildirimi de uygulanmayabilir.

Noktalı virgülün unutulması, hatanın etkisini sonraki bildirime taşıyabilir. Özellikle çok sayıda bildirimin bulunduğu bloklarda, görünürde doğru yazılmış bir özelliğin neden çalışmadığını anlamayı zorlaştıran durumlardan biri budur.

Bildirim bloğundaki son bildirimin ardından noktalı virgül kullanılmaması ise farklı bir durumdur:

section {
background-color: white
}

Kapanış süslü parantezi bildirim bloğunun sona erdiğini gösterdiği için tarayıcı bu bildirimi geçerli kabul edebilir. Bununla birlikte son bildirim de noktalı virgülle tamamlandığında bloğa daha sonra yeni bir bildirim eklenmesi sırasında hata oluşma ihtimali azalır.

Süslü Parantez Hataları

Süslü parantezler, seçiciye ait bildirim bloğunun başlangıç ve bitiş sınırlarını belirler. Açılış veya kapanış süslü parantezinin eksik olması, yalnızca tek bir bildirimi değil, ardından gelen CSS kurallarını da etkileyebilir.

Aşağıdaki örnekte ilk kuralın kapanış süslü parantezi unutulmuştur:

header {
background-color: navy;

footer {
background-color: black;
}

Tarayıcı header kuralının nerede sona erdiğini doğru biçimde belirleyemediği için footer ifadesini bağımsız bir seçici olarak yorumlamakta zorlanır. Bu durumda ikinci kural beklenen şekilde uygulanmayabilir.

Süslü parantez hatalarının etkisi, eksik iki nokta veya geçersiz bir değere göre daha geniş olabilir. Çünkü süslü parantezler tek bir bildirimin değil, bildirim bloğunun sınırlarını oluşturur. Bu sınırların bozulması, hatadan sonra gelen kodların da yanlış yapı içerisinde değerlendirilmesine yol açabilir.

Özellik Adının Yanlış Yazılması

Bir CSS özelliğinin adı yanlış yazıldığında tarayıcı, bu ifadeyi tanıdığı bir özellikle eşleştiremez:

section {
backgroun-color: white;
color: black;
}

backgroun-color ifadesi CSS tarafından tanımlanmış bir özellik değildir. Tarayıcı bu bildirimi yok sayar; ancak söz dizimi doğru olan color: black; bildirimini uygular.

Bu örnekte iki nokta, değer ve noktalı virgül doğru yerde bulunmasına rağmen özellik adı geçerli değildir. Dolayısıyla bir bildirimin yapısal olarak doğru görünmesi, tarayıcı tarafından uygulanması için tek başına yeterli değildir. Kullanılan özellik adının da CSS standartlarında tanımlanmış olması gerekir.

Geçersiz Değer Kullanılması

Bir özellik adı doğru yazılmış olsa bile bu özelliğe uygun olmayan bir değer verilmesi bildirimi geçersiz hâle getirebilir:

section {
text-align: 25px;
color: black;
}

text-align geçerli bir CSS özelliğidir; ancak 25px bu özelliğin kabul ettiği değerlerden biri değildir. Tarayıcı özellik ile değer arasındaki yapıyı ayrıştırabilir, fakat değerin ilgili özellik için geçerli olmadığını belirlediğinde bildirimi uygulamaz.

Ardından gelen color: black; bildirimi geçerli olduğu için işlenmeye devam eder. Tarayıcının hata toleransı, geçersiz değerin etkisini mümkün olduğunca yalnızca ilgili bildirimle sınırlandırır.

Tarayıcı Hatalı Kodu Düzeltmez

Tarayıcının hatalı bildirimi yok sayması, kodun otomatik olarak düzeltildiği anlamına gelmez. Tarayıcı, geliştiricinin hangi özelliği veya değeri kullanmak istediğini tahmin ederek yeni bir kural oluşturmaz. Yalnızca anlayabildiği ve geçerli kabul ettiği bölümleri uygulamaya çalışır.

Örneğin backgroun-color ifadesinin background-color olarak yazılmak istendiği bir insan tarafından kolayca anlaşılabilir. Tarayıcı ise bu iki ifadeyi aynı özellik olarak kabul etmez. Yanlış yazılan bildirim geçersiz kalır ve beklenen görünüm oluşmaz.

CSS hataları genellikle sayfada doğrudan bir hata mesajı göstermez. Web sayfası açılmaya devam eder; ancak ilgili özellik uygulanmadığı için sonuç geliştiricinin beklediğinden farklı görünür. Bu durum, CSS söz dizimi hatalarının fark edilmesini bazen zorlaştırabilir.

Tarayıcının hata karşısındaki temel yaklaşımı, geçersiz bölümü mümkün olduğu ölçüde yok saymak ve geçerli kuralları işlemeye devam etmektir. Hatanın etkisi bazen tek bir bildirimle sınırlı kalırken eksik süslü parantez veya bildirimleri ayırmayan noktalı virgül gibi yapısal sorunlar, kendisinden sonra gelen kodları da etkileyebilir. Bu nedenle CSS’te kullanılan her işaret, yalnızca yazım düzeninin değil, tarayıcının hata sınırlarını belirleyebilmesinin de bir parçasıdır.

CSS Yazmak ile CSS Söz Dizimini Anlamak Arasındaki Fark

Bir CSS kuralını doğru biçimde yazabilmek, her zaman o kuralın yapısını anlamak anlamına gelmez. Geliştirici, daha önce karşılaştığı bir kod örneğini hatırlayarak veya başka bir kaynaktan kopyalayarak çalışan bir sonuç elde edebilir. Ancak kullanılan bölümlerin görevleri bilinmediğinde, yazılan kod çoğunlukla ezberlenmiş bir kalıp olarak kalır.

Örneğin aşağıdaki CSS kuralı, benzer örneklerle daha önce karşılaşmış bir kişi tarafından kolayca yazılabilir:

nav {
background-color: #1d3557;
}

Bu kodun çalıştığını görmek, söz diziminin anlaşıldığını tek başına göstermez. nav ifadesinin neden süslü parantezden önce bulunduğu, background-color ile #1d3557 ifadelerinin neden iki noktayla ayrıldığı ve bildirimin neden noktalı virgülle tamamlandığı bilinmiyorsa geliştirici yalnızca doğru bir yazım kalıbını tekrar etmiş olur.

Söz dizimini anlamak ise kuralın sonucundan önce yapısını görebilmeyi gerektirir. Bu yapıyı bilen geliştirici, nav ifadesini seçici, süslü parantezlerin arasını bildirim bloğu, background-color ifadesini özellik ve #1d3557 ifadesini değer olarak ayırt edebilir. İki noktanın özellik ile değer arasındaki ilişkiyi kurduğunu, noktalı virgülün ise bildirimi tamamladığını bilir.

Bu ayrım, yeni bir CSS kuralı yazılması gerektiğinde daha belirgin hâle gelir. Yalnızca örnekleri ezberleyen kişi, karşılaştığı her yeni ihtiyaç için benzer bir kod aramak zorunda kalabilir. Söz dizimini bilen kişi ise kullanacağı seçici, özellik ve değer değişse bile temel yapının aynı kaldığını bilir:

seçici {
özellik: değer;
}

Bu kalıp, belirli bir CSS özelliğine veya HTML öğesine ait değildir. CSS kurallarının ortak yapısını temsil eder. Seçici değişebilir, bildirim bloğunda farklı özellikler bulunabilir ve özelliklere farklı değerler verilebilir; ancak bu parçaların birbirleriyle kurduğu temel ilişki korunur.

Örneğin iki farklı CSS kuralı görünüşte farklı sözcükler içerebilir:

nav {
background-color: #1d3557;
}
main {
max-width: 1200px;
}

İlk kural bir arka plan rengi, ikinci kural ise en fazla genişlik değeri tanımlar. Buna rağmen her iki kural da aynı söz dizimi üzerine kuruludur. Her ikisinde de önce seçici, ardından süslü parantezlerle sınırlandırılan bildirim bloğu bulunur. Blok içerisindeki özellik ve değer iki noktayla ayrılır, bildirim ise noktalı virgülle tamamlanır.

Söz dizimini anlamak, kullanılan özelliklerin ne sonuç oluşturduğunu bilmekten de farklıdır. Bir geliştirici max-width özelliğinin ne işe yaradığını henüz bilmese bile max-width: 1200px; ifadesinin bir CSS bildirimi olduğunu anlayabilir. İfadenin iki noktadan önceki bölümünün özellik, sonraki bölümünün değer olduğunu ve noktalı virgülle tamamlandığını belirleyebilir.

Aynı şekilde bir CSS özelliğinin anlamını bilmek de bildirimi doğru yazmak için tek başına yeterli değildir. Özellik doğru seçilmiş olsa bile özellik ile değer arasındaki iki nokta unutulduğunda veya bildirim bloğunun sınırları yanlış kurulduğunda tarayıcı kodu beklenen biçimde yorumlayamaz. Teknik bilgi ile bu bilginin doğru söz dizimi içerisinde ifade edilmesi birbirini tamamlayan iki ayrı gerekliliktir.

Söz dizimi bilgisi, hataların kaynağını belirlemeyi de kolaylaştırır. Kopyalanan bir CSS kuralı çalışmadığında yapıyı bilmeyen kişi, sorunun seçicide, özellikte, değerde veya kullanılan işaretlerde olduğunu ayırt etmekte zorlanabilir. Kodun her parçasının görevini bilen geliştirici ise kuralı bölümlerine ayırarak inceleyebilir.

Örneğin aşağıdaki bildirimin neden çalışmadığı, söz dizimi bilindiğinde doğrudan görülebilir:

max-width 1200px;

Burada özellik ve değer doğru seçilmiş olsa da aralarındaki iki nokta eksiktir. Sorun max-width özelliğinin veya 1200px değerinin bilinmemesinden değil, bu iki bölüm arasındaki ilişkinin CSS söz dizimine uygun kurulmamasından kaynaklanır.

Söz dizimini anlamak, yalnızca hatasız kod yazmaya yardımcı olmaz; öğrenilen bilgilerin daha kalıcı olmasını da sağlar. Bir işaretin neden kullanıldığı bilindiğinde o işaret, ezberlenmesi gereken rastgele bir ayrıntı olmaktan çıkar. İki nokta özellik ile değeri ayırdığı, noktalı virgül bildirimi sonlandırdığı ve süslü parantezler bildirim bloğunu sınırlandırdığı için kullanılır.

CSS yazmayı öğrenmek, hazır örnekleri tekrar etmekle başlayabilir; ancak bu örneklerin arkasındaki yapı anlaşılmadığında öğrenme belirli kalıplarla sınırlı kalır. CSS söz dizimini anlamak ise farklı seçicilerin, özelliklerin ve değerlerin aynı temel yapı içerisinde nasıl bir araya geldiğini görmeyi sağlar. Böylece geliştirici yalnızca çalışan kodu değil, tarayıcının neden anlayabildiği bir CSS kuralı yazdığını da bilir.

Sonuç

CSS öğrenme süreci çoğu zaman özelliklerin ve değerlerin nasıl kullanılacağını gösteren hazır kod örnekleriyle başlar. Bu örnekler kısa sürede görünür sonuçlar elde edilmesini sağlasa da CSS kurallarının hangi yapıya göre oluşturulduğunu açıklamak için tek başına yeterli değildir. Yazılan kodun kalıcı biçimde anlaşılabilmesi için seçicinin, bildirim bloğunun, özelliğin, değerin ve kullanılan işaretlerin görevlerinin bilinmesi gerekir.

CSS söz dizimi, tarayıcının bir stil kuralını nasıl okuyacağını belirleyen temel yazım düzenidir. Bir CSS kuralının genel yapısı şu şekilde ifade edilir:

seçici {
özellik: değer;
}

Bu yapı, ezberlenmesi gereken rastgele bir kod kalıbı değildir. Seçici, kuralın hangi HTML öğeleriyle ilişkilendirileceğini belirtir. Süslü parantezler bildirim bloğunun sınırlarını oluşturur. Özellik, öğenin hangi yönünün tanımlandığını; değer ise bu tanımlamanın nasıl uygulanacağını bildirir. İki nokta özellik ile değer arasındaki ilişkiyi kurarken noktalı virgül bildirimin sona erdiğini gösterir.

Tarayıcı, CSS kodunu bu bölümlere ve işaretlere göre ayrıştırır. Geçerli kuralları yapısal hâle getirir, seçicileri HTML belgesindeki öğelerle eşleştirir ve uygulanacak değerleri hesaplayarak sonucu ekrana yansıtır. Söz dizimi kurallarına uymayan bir bildirimle karşılaştığında ise çoğunlukla hatalı bölümü yok sayar ve anlayabildiği diğer CSS kurallarını işlemeye devam eder.

Bu hata toleransı, web sayfasının tek bir CSS hatası nedeniyle tamamen kullanılamaz hâle gelmesini önler. Ancak tarayıcının hatalı kodu yok sayması, geliştiricinin yazım kurallarını dikkate almasına gerek olmadığı anlamına gelmez. Eksik bir iki nokta tek bir bildirimi geçersiz kılabilirken unutulan bir noktalı virgül veya kapanış süslü parantezi, kendisinden sonra gelen ifadelerin de yanlış yorumlanmasına neden olabilir.

CSS söz dizimini anlamak, hazır örnekleri tekrar etmek ile bilinçli biçimde CSS yazmak arasındaki temel farkı oluşturur. Kodun her parçasının neden kullanıldığını bilen geliştirici, farklı kurallarda aynı yapıyı görebilir, söz dizimi hatalarını daha kolay belirleyebilir ve öğrendiği yeni özellikleri doğru bir yapı içerisinde kullanabilir.

CSS’in seçicileri, özellikleri ve değerleri zamanla çeşitlense de bu parçaların bir araya geldiği temel söz dizimi değişmez. Bu nedenle CSS öğreniminde sağlam bir başlangıç yapmak, yalnızca ilk çalışan kodu yazmakla değil; tarayıcının o kodu neden geçerli bir CSS kuralı olarak kabul ettiğini anlamakla mümkündür.