CSS Dersleri 2 - CSS Kod Yapısı


Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS Kod Yapısı konusunu öğreneceğiz.

CSS'de kod yapısı (Syntax), bir seçici ve seçicinin özelliklerini belirten ifadelerden oluşur.

CSS Kod Yapısı

css-syntax

Seçici : HTML yapısında css kodları etkileyeceğimiz kısmı belirler. Seçiciler bir html etiketi, id veya class değeri olabilir.  

İfadeler : Seçiciye uygulayacağımız etkiyi belirlediğimiz alandır ve birden fazla ifade yazmak için noktalı virgül ile ayırabiliriz.

Özellik ve Değer : İfadeleri tanılamak için kullanılır.

Kısacası genel yapımız, ilk önce hangi html elemanını stilini değiştirmek istiyorsak seçici kısmına yazıyor sonra süslü parantezler ile bir kod bloğu oluşturuyoruz. Bu kod blokları arasında seçinin etkileneceği ifadeleri özellik ve değer şeklinde yazıyoruz. Birden fazla ifade için noktalı virgül kullanıyoruz.

CSS Syntax Örneği :

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

Yukarıda ki CSS kodu, sitedeki tüm "p" yani paragraf etiketlerine yazı rengini mavi ve metni ortalama özelliği getirdi. Bu örnekte :

  • p bir seçici,
  • "color" özellik "blue" değer,
  • "text-align" özellik ve "center" ise değerdir.

CSS'de Yorum Satırları

Her dilde olduğu gibi CSS'de de yorum satırları mevcuttur. Bu yorum satırları ile CSS kodlarımızı "yorum" olarak tutabiliriz. 

CSS Yorum Örneği :

p {
  color: blue;  /* Tüm paragraf yazıları mavi olacaktır */
}

Bu içeriği beğendiyseniz paylaşarak destek olabilirsiniz!


Eğitim İçeriği

Eğitim CSS Dersleri
Kategori Web Programlama
Ders Adeti 52 Ders
Dil Türkçe
Güncelleme 10/2021
  • HTML Dersleri

    HTML Dersleri Sıfırdan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 19 Ders
    Dil Türkçe
    Güncelleme 12/2020
    Derse Başla
  • Java Dersleri

    Java Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 125 Ders
    Dil Türkçe
    Güncelleme 09/2020
    Derse Başla
  • CSS Dersleri

    CSS Dersleri Başlangıçtan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 49 Ders
    Dil Türkçe
    Güncelleme 10/2021
    Derse Başla
  • Java Örnek Projeler

    Java Örnek Projeler

    Kategori Programlama Dili
    Ders Süresi 20 Ders
    Dil Türkçe
    Güncelleme 10/2022
    Derse Başla
  • C# Dersleri

    C# Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 100 Ders
    Dil Türkçe
    Güncelleme 04/2024
    Derse Başla