CSS kural yapısı

Seçici, bildirim, özellik ve değer kavramlarını öğrenirsin.

Bir stil bloğunun yapısı

Her CSS stil bloğu üç parçadan oluşur: bir seçici, süslü parantezler içinde bir ya da birkaç bildirim, her bildirimin sonunda noktalı virgül. Örnek: body { color: #333; }.

Seçici hangi öğeyi biçimleyeceğimizi, bildirim neyi değiştireceğimizi söyler. Bu yapı tüm CSS'i oluşturan temel tuğladır.

Seçici

Seçici (selector), süslü parantezin solundaki kısımdır. Hangi HTML öğesinin biçimleneceğini söyler. body, h1, p birer tür seçicidir; etiketin adını yalın yazar.

Seçicileri ileride sınıf ve kimlik için de göreceğiz; bu derste yalnızca tür seçicileriyle yola çıkıyoruz. Şimdilik bilmen gereken: seçiciyi yaz, sonra süslü parantez aç.

Bildirim, özellik, değer

Süslü parantezin içinde her satır bir bildirimdir (declaration). Bildirim iki parçaya ayrılır: özellik (property) solunda, değer (value) sağında, arada iki nokta. Örnek: color: navy.

Bildirimin sonuna noktalı virgül konur. İkinci bir bildirim eklemek istersen aynı bölümde alt alta yazarsın: color: navy; font-size: 18px;.

Uygulama h1 bölümünü iki bildirimle yaz

Bir h1 bölümü yaz. İçinde iki bildirim olsun: color: darkblue ve font-size: 32px. Her bildirimin sonuna noktalı virgül koy.

Örnek çözümü göster

/* h1 bölümünü ekle */
h1 {
  color: darkblue;
  font-size: 32px;
}

Çoklu bildirim ve noktalı virgül

Bir bölümde istediğin kadar bildirim yazabilirsin. Her bildirimi yeni bir satıra koyup iki boşluk girintilersen kodun okunması kolaylaşır. Son bildirimin noktalı virgülü seçimlidir ama koyman önerilir.

Noktalı virgülü unutmak yeni başlayanların en sık yaptığı hatadır. Bir bildirim bitince ; koy; sonra yenisine geç.

Kendini test et

Paragraf seçiciyi yaz

____ {
  color: #333;
  line-height: 1.5;
}

Cevabı göster

p {
  color: #333;
  line-height: 1.5;
}

color: navy bildiriminde hangisi değerdir?
```
h1 {
  color: navy;
}
```
- color
- h1
- navy
- iki nokta işareti
Cevabı göster

navy — Doğru. 'navy' değerin kendisidir; rengin adı.
Parçaları anlamlarıyla eşleştir

Seçici

Hangi öğeyi biçimleyeceğimiz
Bildirim

özellik: değer çifti
Özellik

neyi değiştireceğimiz
Değer

yeni değerin kendisi

Sıradaki ders: Yorumlar ve boşluk

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler