CSS Sözdizimi üç parçadan oluşmaktadır; seçici, özellik, değer.
seçici {özellik: değer}
Seçici normalde tanımlamak istediğiniz HTML elamanı veya etiketi, özellik seçicinin değiştirmek istediğiniz niteliğidir.
Her özellik bir değer alır. Özellik ve değer arasına iki nokta üst üste konulur ve süslü paragraf arasına alınır.

CODE:

p {color: black}

Eğer değer birden fazla kelimeden oluşuyorsa çift tırnak içine alınır.

CODE:

p {font-family: "sans serif"}

Eğer birden fazla özellik tayin etmek istiyorsanız aralarına noktalı virgül koyulur.
Alttaki örnekte sağa dayalı, yeşil renkli paragraf tanımlamasını görebiliriz.

CODE:

p {text-align:right;color:green}

Eğer özellik tayinlerinin daha rahat okunabilir yapmak istiyorsa her birini aşağıdaki örnekte olduğu gibi ayrı satırlarda yapılabilir.

CODE:

p 

{

text-align:right;

color:green;

font-family: verdena

}

Gruplandırma

Seçiciler aralarına virgül konularak gruplandırılabilir. Aşağıdaki örnekte paragraf ve başlık fontu arial olur.

CODE:

p,h1

{

font-family: arial

}

Seçici Sınıfı

Seçici sınıfı özelliği ile aynı HTML elemanına farklı özellikler verilebilir. Dökümanda biri sağa hizalı biri sol hizalı iki ayrı paragraf tanımlamak için

CODE:

p.sag {text-align: right}

p.sol {text-align: left}

HTML elemanlarında sınıf (class) özelliği kullanılır.

CODE:

<p class="sag">

Bu paragraf saga hizalıdır.

</p><p class="sol">

Bu paragraf sola hizalıdır.

</p>

Seçicide HTML etiket/eleman ismini kaldırırsanız dökümandaki bütün HTML etiket/elemanlarına kullanılabilecek ortak bir sınıf oluşturulur.
Aşağıda verilen örnekte class="sol" eklenen tüm HTML etiket/elemanları ortaya hizalanır.

CODE:

.sol {text-align: left} 



<h1 class="sol">

Başlık sola hizalıdır.

</h1><p class="sol">

Paragraf sola hizalıdır.

</p>

id Seçicisi

İd seçicisi sınıf seçicisinden farklıdır. Sınıf seçicisi sayfada bir çok elemana etki ederken, id seçicisi sadece bir elemana etki eder.
Id niteliği doküman içeriğinde tek olmalıdır.

Alttaki stil kuralı id değeri "ana1" olan p elamanına etki edecektir.

CODE:

p#ana1

{

text-align: left;

color: green

}

Alttaki stil kuralı id değeri "sag25" olan ilk elemana etki edecektir.

CODE:

*#sag25 {color: red}

Kural altta bulunana h1 elamanı ile eşleşir.

CODE:

<h1 id="sag25">Örnek yazı</h1>

Alttaki kural id değeri "sag25" olan p elemanı ile eşleşecektir.

CODE:

p#sag25 {color: red}

Kural aşağıdaki h2 elamanına etki etmez

CODE:

<h2 id="sag25">Örnek yazı</h2>

CSS Yorumları

CSS'nin içine kodları açıklayan yorumlar ekleyebilirsiniz. Yorum tarayıcı tarafından gözardıcedilecektir.
Bir CSS yorumu örnekte olduğu gibi "/*" ile başlar "*/" ile biter:
CODE:

/* Bu bir yorumdur */

{

text-align: left;

/* Bu da başka bir yorumdur */

color: red;

font-family: verdena

}

Dr.A.S.

Dia
okanatabag@gmail.com
17 Mart 2006 13:29