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.

p {color: black}

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

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.

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.

[/php]
p

{

text-align:right;

color:green;

font-family: verdena

}
[/php]

Gruplandırma

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

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;

p.sag {text-align: right}

p.sol {text-align: left}

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

<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.

.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.

p#ana1

{

text-align: left;

color: green

}

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

*#sag25 {color: red}

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

[/php]

Örnek yazı

[/php]

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

p#sag25 {color: red}

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

<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:

/* Bu bir yorumdur */

{

text-align: left;

/* Bu da başka bir yorumdur */

color: red;

font-family: verdena

}

Dr.A.S.

Benzer Yazılar

• CSS İle Radius (Oval) Kenarlar
• CSS ve HTML Arasındaki Fark
• CSS Giriş
• CSS | Hizalama
• CSS | Renkler ve Arkaplanlar
• CSS | Fontlar
• CSS | Metin İşlemleri
• CSS | Uzunluk Birimleri
• CSS | Birimler
• CSS | Tarayıcıya css tanıtmak