CSS Sözdizimi

CSS Sözdizimi

Bi CSS kodu aşağıdaki gibi yapılardan oluşur:

Seçici, biçimlendirmek, stil vermek istediğiniz HTML elementini ifade eder.

Bildirim, noktalı virgül ile ayrılmış, özellik - değer çiftlerinden oluşur. Bu özellikler CSS özellikleridir.

Noktalı virgül ile ayırarak dilediğiniz özelliğe değer atayabilirsiniz.

Tüm CSS bildirimleri noktalı virgül ile bitmek zorundadır.

Aynı zamanda bildirim alanları süslü (kıvırcık, küme) parantez içinde yazılmalıdır.

p {
    color: yellow;
    text-align: center;
    background-color:red;

} 

Yukarıdaki örnekte sayfa içindeki tüm <p> elementlerinin zemin rengi sarı, yazı rengi kırmızı olacaktır. Yazı aynı zamanda ortalanacaktır.

color:yellow yazı rengini sarı yapar (ing: color: renk, yellow:sarı)

text-align:center metni ortalalayacaktır (ing: center: orta)

background-color:red zemin yani arka plan rengi kırmızı olacaktır.

CSS Seçiciler

Bir veya daha fazla HTML elementinin stilini değiştirebilmek için önce onu sayfa içinde bulmak gerekir.

CSS seçiciler sayesinde doğrudan bir HTML elementi için still yazabildiğimiz gibi aynı anda birden fazla HTML elementine de biçim verebiliriz.

Sayfa içindeki bir HTML elementini;

• Elementin adı ile
• Elementin id yani kimliği ile
• Elemente atanan class (sınıf) değeri ile

erişebiliriz.

HTML Elementine Adı ile CSS Üzerinden Erişmek

HTML sayfası üzerindeki tüm elementlere h1, p gibi etiketin adı ile erişmek ve bunlara CSS kodu yazmak mümkündür.

p {
    text-align: center;
    color: red;
}

Yukarıdaki örnekte sayfadaki tüm <p> etiketlerinin içindeki metin kırmızı ve ortalanmış olacaktır.

HTML Elementine CSS Id Seçici ile Erişmek

HTML sayfamız içinde belirli tek bir elemente erişmek ve ona stil vermek istiyorsak o zaman id seçici kullanmak gerekir.

HTML elementlerine id adı verilen birer kimlik ataması yapabiliyoruz.

Aynı sayfa içinde her elementin eşsiz id değeri olmalıdır. Yani <p id="ozet"> şeklinde bir elemente "ozet" id değerini verdiysek o sayfa içinde başka hiç bir elementin id değeri "ozet" olmamalıdır.

id değeri verirken Türkçe karakter kullanmamaya dikkat edin (örneğin: özet değil ozet şeklinde)

id değeri verirken özel karakter kullanmayın (?*0/+ vb) aynı zamanda Türkçe olan şu karakterleri kullanmayın: ğüşöçİı

CSS ile id üzerinden bir elemente erişmek istiyorak kural yapımız #id{} şeklinde olmalıdır. Yani elementin adının başına # simgesi koyarak o elemente erişebiliriz.

#ozet {
    text-align: center;
    color: red;
    background-color:yellow;
    border:1px solid #000000;
} 

Bu örnekte #ozet id degeri atanan HTML elementinin yazısı ortalanmış, 1px kalınlığında siyah sınır çizgisi çekilmiş, yazı rengi kırmızı ve zemin rengi sarı olacaktır.

HTML Elementlerine class Seçici ile Erişmek

Bir veya bir grup HTML elementine biçim yazmak istiyorsak o zaman class yanı sınıf seçici kullanabiliriz.

CSS içinde class seçicilerin başına . yani nokta eklenir. Bir HTML elementine class ataması <p class="detay"> şeklinde yapılır.

CSS içinden bu elemente erişmek için .detay yani class değeri nokta ile yazılmalıdır.

.detay {
    text-align: center;
    color: red;
    background-color:yellow;   
} 

Yukarıdaki örnekte .detay sınıfı uygulanan <p> etiketleri içindeki metin kırmızı, zemin rengi sarı, yazılar ortalanmış olacaktır.

class kullanırken sadece belirli bir HTML elementinin class tarafından etkilenmesini de isteyebiliriz.

Aşağıdaki örnekte CSS kodundan sadece .detay sınıfı uygulanmış <p> etiketleri etkilenecektir.

p.center {
    text-align: center;
    color: red;
    background-color:blue;
}

Ayrıca bir HTML elementine birden fazla class uygulanabilir.

Örneğin aşağıdaki HTML elementine iki adet class uygulanmıştır. HTML elementi ikisinden de etkilenecektir.

<p class="ortali buyuk">Bu bir paragraf.</p>

Bu CSS örneğinde yazı hem ortali hem de büyük yazılacaktır.

Seçicilere Gruplamak

Aynı özelliğe sahip HTML elementleri varsa bunları gruplamak mümkündür. Örneğin aşağıdaki gibi bir kodumuz olsun:

h1 {
    text-align: center;
    color: yellow;
}

h2 {
    text-align: center;
    color: yellow;
}

p {
    text-align: center;
    color: yellow;
}

Görüldüğü gibi aynı özelliklere sahip HTML elementleri var. Bu elementleri gruplayarak hem daha kısa hem de daha kolay yönetilebilir bir kod yazabiliriz.

HTML elementlerini virgül ile ayırarak gruplama yapılır.

Bu örnekteki kodu aşağıdaki gibi gruplayabiliriz:

h1,h2,h3 {
    text-align: center;
    color: yellow;
}

CSS Yorum Eklemek

CSS dosyanıza kendinize notlar eklemek, kodunuz ile ilgili açıklama bırakmak için yorumlardan faydalanabilirsiniz.

Yorumlar tarayıcı tarafından görmezden gelinir ve kodun çalışmasını etkilemez.

CSS yorum /* ile başlamalı ve */ ile bitmelidir. Yorumlar aynı zamanda çok satırlı olabilir.

p {
    color: red;
    /* Tek satır yorum */
    text-align: center;
}

/* 
Yorum satırı 1
Yorum satırı 2
Yorum satırı 3 
*/