CSS Söz Dizimi: Temel Yapı ve Kullanım Rehberi

CSS (Cascading Style Sheets), HTML ile oluşturulan web sayfalarının stilini ve görünümünü düzenlemek için kullanılan bir dildir. CSS ile sayfalara renk, yazı tipi, boşluk, kenar boşlukları ve daha birçok görsel özellik eklenebilir. Ancak CSS’yi verimli kullanabilmek için CSS söz dizimini anlamak oldukça önemlidir. Bu yazıda CSS söz diziminin temel yapı taşlarını inceleyeceğiz.

CSS Söz Diziminin Temel Yapısı

CSS’nin temel yapısı üç ana bileşenden oluşur: seçici (selector), özellik (property) ve değer (value). Bu bileşenler şu şekilde bir araya gelir:

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

1. Seçici (Selector)

CSS’de seçici, hangi HTML elementine stil uygulanacağını belirler. Seçiciler, bir HTML elemanını doğrudan seçebilir, sınıflar veya kimlikler (id) aracılığıyla belirli gruplara ya da tekil elemanlara stil uygulayabilir.

• Eleman Seçici: Belirli bir HTML etiketine stil uygular.

p {
  color: blue;
}

Yukarıdaki örnekte tüm <p> (paragraf) etiketlerine mavi renk uygulanır.

Sınıf Seçici (.class): Aynı sınıfa sahip birden fazla öğeye stil uygular.

.başlık {
  font-size: 24px;
}

ID Seçici (#id): Tek bir öğeye stil uygular.

#ana-bölüm {
  background-color: #f1f1f1;
}

2. Özellik (Property)

Özellik, hangi stil özelliğinin uygulanacağını belirtir. Bu özellikler renk, yazı tipi, boyut, kenar boşlukları gibi CSS’nin sunduğu stil özellikleridir.

• color: Metin rengini belirler.
• font-size: Yazı boyutunu belirler.
• background-color: Arka plan rengini belirler.

Örneğin:

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

3. Değer (Value)

CSS’de özellikler belirli bir değer ile birlikte kullanılır. Değer, özelliğin nasıl uygulanacağını tanımlar. Renkler, piksel değerleri, yüzde oranları veya sabit tanımlamalar (örneğin, bold, italic) değerler olabilir.

• color: red, #ff0000, rgb(255, 0, 0) gibi renk değerleri alabilir.
• font-size: 16px, 1.5em, % gibi boyut değerleri alabilir.

Örneğin:

h1 {
  color: navy;
  font-size: 36px;
}

CSS Kuralları (Rule Sets)

Bir CSS kuralı, yukarıda bahsettiğimiz seçici, özellik ve değerlerin bir araya gelmesinden oluşur. Her CSS kuralı bir declaration block (stil bloğu) içinde bulunur ve şu şekilde yazılır:

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

Örnek:

body {
  background-color: #eaeaea;
  font-family: Arial, sans-serif;
}

Bu örnekte:

• body seçicisi, tüm sayfanın arka planını #eaeaea olarak ayarlar ve yazı tipini Arial yapar.

Birden Fazla Seçici Kullanımı

Birden fazla HTML elemanına aynı stili uygulamak için seçiciler virgülle ayrılabilir. Örneğin:

h1, h2, h3 {
  color: darkblue;
  font-family: 'Segoe UI', sans-serif;
}

Bu örnekte, h1, h2 ve h3 etiketlerine aynı renk ve yazı tipi uygulanır.

CSS Yorum Satırları

CSS kodları arasında yorum eklemek, kodu daha anlaşılır kılmak ve gelecekteki düzenlemeler için notlar bırakmak için kullanılabilir. Yorumlar /* ile başlar ve */ ile biter:

/* Bu satır arka plan rengini ayarlar */
body {
  background-color: #ffffff;
}

CSS Dosya Yapısı ve İçeriği

CSS stilleri, HTML sayfasına üç farklı şekilde eklenebilir:

1. İç Stil (Internal CSS): <style> etiketleri içinde HTML belgesine eklenir.

<style>
  body {
    background-color: #fafafa;
  }
</style>

Satır İçi Stil (Inline CSS): HTML elemanlarına direkt olarak style özelliğiyle eklenir.

<p style="color: red;">Bu bir kırmızı paragraf.</p>

Dış Stil (External CSS): Ayrı bir .css dosyasına yazılır ve HTML belgesine <link> etiketi ile bağlanır.

<link rel="stylesheet" href="styles.css">

Sonuç

CSS söz dizimi, web sayfalarınıza stil ve görsel öğeler eklemenizi sağlayan basit ama güçlü bir yapıya sahiptir. Seçici, özellik ve değer bileşenlerini doğru kullanarak, sayfanızı estetik ve kullanıcı dostu hale getirebilirsiniz. Doğru CSS yapısıyla daha tutarlı, okunabilir ve modern web siteleri oluşturabilirsiniz.