CSS Nedir? Temel Seçiciler ve Stil Yazımı

CSS, Cascading Style Sheets (Basamaklı Stil Şablonları) ifadesinin kısaltmasıdır. HTML bir sayfanın yapısını kurarken CSS onun görünümünü belirler. Renkler, yazı tipleri, boşluklar, yerleşim ve mobil uyum CSS ile yönetilir.

CSS’i Sayfaya Eklemek

Üç yolu vardır:

1. Satır içi: Etiketin içine style özelliğiyle yazılır. Küçük denemeler dışında önerilmez.
2. Dahili: <head> içindeki <style> etiketiyle yazılır.
3. Harici: Ayrı bir .css dosyasına yazılır ve bağlanır. En sık tercih edilen yöntemdir.

<link rel="stylesheet" href="stil.css">

CSS Kuralının Yapısı

p {
    color: blue;
    font-size: 18px;
}

Bu kuralda p seçici, color ve font-size özellik, blue ve 18px ise değerdir. Seçici hangi öğenin biçimleneceğini, süslü parantezin içi nasıl biçimleneceğini söyler.

Temel Seçiciler

• Etiket seçici: h1 { } sayfadaki tüm h1 öğelerini seçer.
• Sınıf seçici: .kutu { } class="kutu" olan tüm öğeleri seçer.
• Kimlik seçici: #ust { } id="ust" olan tek öğeyi seçer.
• Gruplama: h1, h2 { } birden fazla öğeye aynı kuralı verir.

Bir örnek:

<p class="uyari">Dikkat!</p>

.uyari {
    color: white;
    background-color: crimson;
    padding: 10px;
}

Sık Kullanılan Özellikler

• color: Yazı rengi.
• background-color: Arka plan rengi.
• font-family: Yazı tipi.
• font-size: Yazı boyutu.
• text-align: Hizalama (left, center, right).
• margin: Öğenin dışındaki boşluk.
• padding: Öğenin içindeki boşluk.
• border: Kenarlık.

Kutu Modeli

Tarayıcı her HTML öğesini bir kutu olarak görür. Bu kutu içerikten, padding, border ve margin katmanlarından oluşur. Bir öğenin neden beklediğinizden büyük ya da küçük göründüğünü anlamak için bu modeli bilmek önemlidir.

.kart {
    width: 300px;
    padding: 20px;
    border: 2px solid gray;
    margin: 15px;
}

Varsayılan durumda toplam genişlik 300 + 40 (padding) + 4 (border) = 344 piksel olur. box-sizing: border-box; yazarsanız genişlik kenarlık ve iç boşluk dahil 300 piksel kalır.

Flexbox ile Yan Yana Dizmek

.satir {
    display: flex;
    gap: 16px;
}

display: flex verilen kapların içindeki öğeler yan yana dizilir. gap aralarındaki boşluğu belirler.

Basamaklılık (Cascade) Nedir?

Aynı öğe için birden fazla kural çakışırsa tarayıcı hangisinin geçerli olacağına özgüllük ve sıraya göre karar verir. Genel olarak kimlik seçici sınıf seçiciden, sınıf seçici etiket seçiciden güçlüdür. Eşitlik varsa dosyada sonra yazılan kural geçerli olur.

Sonuç

CSS’i öğrenmenin en iyi yolu, bir HTML sayfasını açıp rengi, boşluğu ve boyutu tek tek değiştirerek sonucu görmektir. Tarayıcıda F12 tuşuyla geliştirici araçlarını açıp canlı olarak deneme yapabilirsiniz.