CSS/Yazım Kuralları

CSS'de yazım kuralları toplam olarak 3 kısımdan oluşur

Seçici
Özellik
Argüman

Seçici{
  özellik: argüman;
  özellik-özellik: argüman argüman;
  özellik-özellik-özellik: argüman;
  özellik: argüman argüman argüman
}

Bu gibi yazım kurallarından oluşur.

Seçici

Seçici, HTML'deki elementleri(etiketleri, tagları vb.) hedef alır. Hedef alınan elementlere, özellik ve argüman yardımıyla şekil(stil) verilir.

Özellik

Özellik, HTML'deki elementlerin özelliklerini belirtir. Her özellik minimum 1 argüman almak zorundadır.

Argüman

Argüman, HTML'deki elementlere verilen özelliklerin değeridir. Argüman yazmak için mutlaka özellik olması gerekmektedir.

Scope(Süslü parantezler)

CSS'deki özellikler ve argümanlar, Scope denilen {} (süslü parantezler) içerisine yazılır.

Yorum satırları

Her bilgisayar dilinde olduğu gibi CSS'de de yorum satırları vardır. Yorum satırları /* ile başlar ve */ ile biter.

Aşağıdaki örnekte

h1 bir seçicidir. HTML'deki <h1></h1> etiketlerini hedef alır.
font-family bir özellikdir. HTML'deki <h1></h1> etiketleri içerisine yazılan metinin yazı tipini belirler.
Arial, Helvetica, serif bir argümandır. HTML'deki <h1></h1> etiketlerinin içerisine yazılan metinin yazı tipini Arial olarak belirler. Eğer Sayfayı görüntüleyen bilgisayarda Arial yazı fontu yüklü değil ise Helvetica yazı fontunu belirle demiş olduk ve son olarak serif bu da yazı tipi ailesini belirtir.

Eğer az bir miktar dahi olsa İngilizce bilginiz varsa, aşağıdaki özellikleri anlamış olmanız gerekir. Özellikleri ve argümanları daha sonra anlatacağız. Bu örneklerde bilmeniz gereken CSS'in yazım kuralları. Dikkat ettiyseniz argümanların sonunda ; (noktalı virgül) kullandık. Bir çok dilde olduğu gibi CSS'de de noktalı virgül kuralın bittiğini gösterir. Eğer scope içinde yazacağınız argüman son ise noktalı virgül koymanıza gerek yoktur. Aşağıdaki color özelliğine bakabilirsiniz

h1{
  font-family: Arial, Helvetica, serif;
  font-size:21px;
  color: #00F
}

/*CSS'de yazılan farklı bir stil okunabilir olması nedeniyle bu yazım stili tercih edilir*/
h2{font-family: Arial, Helvetica, serif; font-size:18px; color:#00F}