Temel CSS Yapısı: “Ruleset” & “Inline Style”

Bu yazıda, CSS öğrenmeye yeni başlayanların jargona hakim olması adına temel CSS yapısı hakkında detaylı bir konu anlatımı yapmaya karar verdim. Özellikle “Neydi o ya?” dediğiniz kavramları derlemenin faydalı olacağını düşündüm. Zaten kendim de faydalanacağım için böyle bir derleme yapmanın faydalı olacağını düşündüm.

CSS bize, bir web sayfasına stil bilgilerini eklemek adına iki ana yaklaşım sunar. İlki, “CSS ruleset” olarak bilinen bir kurallar bütünüdür. Bu yöntem, bazen sadece “ruleset” olarak da adlandırılır. İkincisi ise “inline style” olarak tanımlanan yaklaşımdır. Her iki yöntemin de kendine özgü kullanım alanları vardır. Sırayla inceleyelim.

CSS Ruleset

CSS Ruleset, bir web sayfasındaki belirli elemanlara stil bilgileri atamak için kullanılır. Bu yapının çeşitli bileşenleri vardır ve her biri, stil bilgilerinin nasıl uygulanacağını belirler.

• Seçici (Selector): Ruleset’in başlangıcını oluşturur ve stil bilgisinin uygulanacağı elemanı hedef alır. Örneğin, tüm paragraf etiketlerine (<p>) stil bilgisi uygulamak istiyorsanız, “p” seçici olarak kullanılır.
• Deklarasyon Bloğu (Declaration Block): Süslü parantezler ({ }) arasında (bu parantezleri de içerecek şekilde) yer alan koda denir. Bu blok, bir ya da birden fazla CSS deklarasyonunu içerir.
• Deklarasyon (Declaration): Seçili elemana stil bilgisi atamak için kullanılan özellik-değer çiftinin adıdır. Bir deklarasyon, bir özellik ve bir değerden oluşur.
• Özellik (Property): Deklarasyonun ilk bölümüdür ve elemanın hangi görsel özelliğinin değiştirileceğini belirtir. Örneğin, bir metnin rengini değiştirmek istiyorsanız “color” özelliğini kullanırsınız.
• Değer (Value): Deklarasyonun ikinci bölümüdür ve belirtilen özelliğe atanacak değeri ifade eder. Örneğin, metni kırmızı yapmak istiyorsanız, “color” özelliği için “red” değerini kullanırsınız.

CSS Inline Style

CSS Inline Style, doğrudan bir HTML elemanının etiketine eklenen stil bilgilerini ifade eder. Bu yöntem, genellikle bireysel elemanlara özel stil bilgileri uygulamak için kullanılır ve genellikle o elemana özgüdür. Inline stil kullanımı ise şu bileşenlerden oluşur:

• Açılış Etiketi (Opening Tag): Bir HTML elemanının başlangıcıdır. Bu, stil bilgisi uygulanacak olan elemandır. Örneğin, <div> ya da <p> gibi.
• Özellik (Attribute): Inline stil bilgisi eklemek için “style” özelliği kullanılır. Bu özellik, belirli bir HTML elemanına CSS stil bilgisi eklemek için kullanılır.
• Deklarasyon (Declaration): Seçili elemana stil bilgisi atamak için kullanılan özellik-değer çiftinin adıdır. Bu, inline stil içinde de aynı şekildedir.
• Özellik (Property): Deklarasyonun ilk bölümüdür ve elemanın hangi görsel özelliğinin değiştirileceğini belirtir. Örneğin, bir metnin rengini değiştirmek istiyorsanız “color” özelliğini kullanırsınız.
• Değer (Value): Deklarasyonun ikinci bölümüdür ve belirtilen özelliğe atanacak değeri ifade eder. Örneğin, metni kırmızı yapmak istiyorsanız, “color” özelliği için “red” değerini kullanırsınız.

CSS inline style, genellikle belirli durumlar için tercih edilen bir yöntemdir. Özellikle sayfa üzerinde tek bir öğeye özgü, benzersiz bir stil uygulamak istediğinizde bu yöntemi kullanabilirsiniz. Ancak, geniş kapsamlı ve genel stillendirme için genellikle CSS Ruleset yöntemi tercih edilir.

CSS Ruleset ve CSS Inline Style Karşılaştırması

O zaman yeri gelmişken hangi durumda hangisinin kullanılacağını inceleyelim. Genelleştirmek adına aşağıdaki tabloyu oluşturdum:

Özellik	Ruleset	Inline Style
Uygulama Alanı	Tüm web sitesi ya da sayfa	Tek bir HTML elemanı
Genel sayfa düzeni	✔️
Tek bir değişiklikle çok elemanı stil	✔️
CSS seçicileri (class, id vs.)	✔️
Tek bir elemana özel stil	✔️	✔️
Dinamik içerik için hızlı stil değişimi		✔️

Yukarıdaki tabloyu şu şekilde özetleyebilirim:

1. CSS Ruleset
   • Uygulama Alanı: Genellikle tüm web sitesi veya belirli bir sayfa için stil bilgilerini tanımlamada kullanılır.
   • Kullanım Durumu:
     • Web sayfasının ya da sitenin genel görünüm ve düzenini belirlemek istediğinizde.
     • Tek bir stil değişikliğiyle birçok elemana stil uygulamak istediğinizde.
     • CSS seçicileri (örn. class, id) kullanarak belirli elemanları hedeflemek istediğinizde.
2. Inline Style Kullanımı
   • Uygulama Alanı: Sadece tek bir HTML elemanına stil uygulamak istediğinizde kullanılır.
   • Kullanım Durumu:
     • Stil değişikliğinin sadece belirli bir elemana özgü olmasını istediğinizde.
     • Dinamik içerik oluşturulduğunda ve belirli bir elemanın stilini hızlı ve kolay bir şekilde değiştirmek istediğinizde.
     • Sayfa üzerinde sadece o spesifik elemanın farklı görünmesi gerektiğinde.
     • CSS dosyasını düzenlemek ya da değiştirmek mümkün olmadığında.
     • Kısa süreli test veya deneme amaçlı stil değişiklikleri yapmak istendiğinde.

CSS temel yapısı ile alakalı faydalı olacağını düşündüğüm bir tablo hazırladım. Umarım faydalı olur. Bakınız:

CSS Ruleset	CSS Inline Style
selector p { color: blue; }	opening tag <p style="color:blue;">Hello World!</p> – –
declaration block p { color: blue; }	attribute <p style="color:blue;">Hello World!</p> – –
declaration p { color: blue; }	declaration <p style="color:blue;">Hello World!</p> – –
property p { color: blue; }	property <p style="color:blue;">Hello World!</p> – –
value p { color: blue; }	value <p style="color:blue;">Hello World!</p> – –

Umarım anlaşılır bir yazı olmuştur. İlk bakışta, CSS’i yazmak için kullanılan bu iki farklı yöntem karmaşık gibi görünebilir, ancak emin olun, zamanla daha anlaşılır bir hale gelecektir.