CSS Nedir? CSS Seçicileri ve Kullanımı

Bir web sayfasının başlıklarını, paragraflarını ve bağlantılarını HTML ile oluştururuz. Peki bu içeriklerin rengini, boyutunu, boşluklarını ve sayfadaki yerleşimini nasıl değiştiririz? İşte burada CSS (Cascading Style Sheets) devreye girer. CSS, web sayfalarının görünümünü düzenlemek için kullanılan stil dilidir.

Bu Nizokka Akademi rehberinde CSS nedir, HTML ile nasıl kullanılır, CSS seçicileri (selectors) nelerdir? sorularını yanıtlayacağız. Ardından ilk style.css dosyamızı oluşturup küçük bir tasarım uygulaması yapacağız.

1. CSS Nedir ve Ne İşe Yarar?

CSS, HTML belgelerindeki elementlerin nasıl görüntüleneceğini tanımlar. Metin rengi, arka plan, kenarlık, yazı tipi, boşluk ve sayfa düzeni gibi birçok özellik CSS ile kontrol edilir.

HTML: İçeriğin yapısını ve anlamını belirler.
CSS: İçeriğin görünümünü ve yerleşimini düzenler.
JavaScript: Gerektiğinde etkileşimli davranışlar sağlar.

Örneğin HTML ile “Bu bir başlıktır” deriz. CSS ile aynı başlığın mavi, kalın ve büyük görünmesini sağlayabiliriz.

2. CSS Kodunun Yapısı: Seçici, Özellik ve Değer

Bir CSS kuralı genellikle seçici (selector) ve süslü parantezler içindeki bildirimlerden (declarations) oluşur.

h1 {
  color: #2563eb;
  font-size: 32px;
}

Bu örnekte h1 seçicidir; color ve font-size özelliklerdir. #2563eb ve 32px ise bu özelliklere verilen değerlerdir. Her bildirimde özellik ve değer iki nokta ile ayrılır; bildirimler genellikle noktalı virgülle sonlandırılır.

3. CSS HTML Dosyasına Nasıl Eklenir?

CSS kullanmanın üç yaygın yöntemi vardır. Küçük denemeler için hepsi işe yarar; büyüyen projelerde genellikle harici stil dosyası tercih edilir.

3.1. Inline CSS: Doğrudan Element Üzerinde

<p style="color: blue;">Mavi yazı</p>

Bu yöntem hızlıdır ama çok sayıda elementte tekrarlandığında bakımı zorlaşır. Ayrıca içerik yönetim sistemleri güvenlik nedeniyle style özelliğini kaldırabilir.

3.2. Internal CSS: HTML Belgesinin İçinde

Bağımsız bir HTML belgesinde <head> içine <style> ekleyebilirsiniz.

<style>
  p {
    color: #334155;
  }
</style>

Not: Bu kod yalnızca örnektir. Nizokka Akademi'nin makale alanına çalışan bir <style> etiketi eklemek yerine kodu örnek olarak göstermek daha uygundur.

3.3. External CSS: Ayrı Stil Dosyası

En düzenli yaklaşımlardan biri, stilleri style.css dosyasına yazıp HTML belgesinin <head> bölümünden bağlamaktır:

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

Dosya yolu yanlışsa stiller yüklenmez. index.html ile style.css aynı klasördeyse yukarıdaki bağlantı çalışır.

4. İlk CSS Dosyanızı Oluşturun

Bilgisayarınızda yeni bir klasör açın ve içine index.html ile style.css adlı iki dosya ekleyin.

index.html

<!doctype html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>İlk CSS Sayfam</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>CSS Öğreniyorum</h1>
  <p class="aciklama">İlk stil dosyam çalışıyor.</p>
</body>
</html>

style.css

body {
  font-family: Arial, sans-serif;
  background-color: #f8fafc;
  color: #1e293b;
}

h1 {
  color: #2563eb;
}

.aciklama {
  font-size: 18px;
  line-height: 1.6;
}

Dosyaları kaydedip index.html dosyasını tarayıcıda açın. Başlık mavi, arka plan açık renkli görünüyorsa stil dosyanız doğru bağlanmıştır.

5. En Çok Kullanılan CSS Seçicileri

CSS seçicileri, hangi HTML elementlerine stil uygulanacağını belirler. Aşağıdaki seçiciler başlangıç için özellikle önemlidir.

5.1. Element Seçici (Type Selector)

Belirli bir HTML etiketinin bütün eşleşmelerini hedefler.

p {
  color: #475569;
}

Bu kural sayfadaki tüm <p> elementlerini seçer.

5.2. Sınıf Seçici (Class Selector)

Birden fazla elemente aynı tasarımı uygulamak için class kullanılır. CSS'te sınıf adının önüne nokta konur.

<p class="vurgu">Önemli açıklama</p>
<p class="vurgu">İkinci açıklama</p>

.vurgu {
  color: #b45309;
  font-weight: 700;
}

İki paragraf da aynı stil kuralından yararlanır.

5.3. ID Seçici (ID Selector)

Tekil bir elementi hedeflemek için # işareti kullanılır.

<header id="site-basligi">Nizokka Akademi</header>

#site-basligi {
  background-color: #0f172a;
  color: white;
}

Bir HTML belgesinde aynı id değerini birden fazla elemente vermemelisiniz. Tekrar kullanılabilir görsel tasarımlar için çoğunlukla sınıflar daha elverişlidir.

5.4. Grup Seçici

Virgül kullanarak birden fazla seçiciye aynı özellikleri uygulayabilirsiniz.

h1, h2, h3 {
  font-family: Arial, sans-serif;
}

5.5. Alt Eleman ve Doğrudan Çocuk Seçicileri

Aradaki boşluk, bir elementin içindeki tüm eşleşen alt elementleri seçer. > işareti ise yalnızca doğrudan çocukları hedefler.

nav a {
  text-decoration: none;
}

.menu > li {
  margin-bottom: 8px;
}

İlk kural, herhangi bir nav içindeki bağlantıları etkiler. İkinci kural, menu sınıfına sahip elementin doğrudan altındaki li elementlerine uygulanır.

5.6. Sözde Sınıflar (Pseudo-classes)

Sözde sınıflar, bir elementin belirli durumlarını hedefler. Örneğin bağlantı üzerine gelindiğinde veya klavyeyle odaklandığında farklı görünüm verebilirsiniz.

a:hover {
  color: #1d4ed8;
}

a:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 3px;
}

:hover davranışına tek başına güvenmeyin; dokunmatik cihazlarda fareyle üzerine gelme durumu bulunmayabilir. Klavye kullanıcıları için odak görünümünü koruyun.

6. Sık Kullanılan CSS Özellikleri

Özellik	Görevi	Örnek
`color`	Yazı rengi	`color: #222;`
`background-color`	Arka plan rengi	`background-color: white;`
`font-size`	Yazı boyutu	`font-size: 18px;`
`font-weight`	Yazı kalınlığı	`font-weight: 700;`
`line-height`	Satır yüksekliği	`line-height: 1.6;`
`padding`	İç boşluk	`padding: 16px;`
`margin`	Dış boşluk	`margin: 20px;`
`border-radius`	Köşe yuvarlama	`border-radius: 12px;`

margin, padding ve border ilişkisini serinin sonraki CSS Box Model dersinde ayrıntılı inceleyeceğiz.

7. Cascade ve Specificity: Hangi CSS Kuralı Kazanır?

Aynı elemente birden fazla kural uygulanabilir. CSS'in cascade sistemi; kuralın kaynağı, önemi, katmanı, seçici özgüllüğü ve yazım sırası gibi etkenleri birlikte değerlendirir. Bu nedenle “her zaman son yazılan kural kazanır” demek doğru değildir.

<p class="bilgi">Merhaba CSS!</p>

p {
  color: black;
}

.bilgi {
  color: green;
}

Bu basit örnekte paragraf normal koşullarda yeşil görünür; çünkü sınıf seçicisi, element seçicisinden daha özgüldür. Eşit öncelik ve özgüllükteki kurallar arasında ise kaynak sırası belirleyici olabilir.

Başlangıçta kuralları anlaşılır tutmaya, gereksiz !important kullanmamaya ve tarayıcının geliştirici araçlarıyla hangi stilin geçerli olduğunu incelemeye odaklanın.

8. Mini Proje: CSS ile Tanıtım Kartı

Şimdi öğrendiğimiz seçicileri küçük bir projede kullanalım. Aşağıdaki HTML'i örnek dosyanızın <body> bölümüne ekleyin:

<article class="kart">
  <h2 class="kart-baslik">Nizokka Akademi</h2>
  <p>HTML ve CSS öğrenmeye başlayın.</p>
  <a class="kart-baglanti" href="/academy">
    Dersleri incele
  </a>
</article>

Ardından style.css dosyasına şu kuralları ekleyin:

.kart {
  max-width: 420px;
  padding: 24px;
  margin: 32px auto;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
}

.kart-baslik {
  color: #0f172a;
  margin-top: 0;
}

.kart-baglanti {
  color: #1d4ed8;
  font-weight: 700;
}

.kart-baglanti:focus-visible {
  outline: 3px solid #f59e0b;
}

Burada aynı HTML yapısına farklı tasarımlar uygulayabilirsiniz. Örneğin arka plan rengini değiştirin veya kartın iç boşluğunu artırın. Her değişiklikten sonra sayfayı yenileyerek sonucu görün.

9. CSS Çalışmıyorsa Neleri Kontrol Etmelisiniz?

style.css dosyasının adı ve konumu doğru mu?
HTML dosyasındaki href yolu doğru mu?
Sınıf seçicisinin başındaki . veya ID seçicisinin başındaki # unutuldu mu?
CSS içinde süslü parantez, iki nokta veya bildirim ayırıcılarında hata var mı?
Başka bir CSS kuralı yazdığınız kuralın üzerine mi çıkıyor?
Değişiklikleri kaydedip sayfayı yenilediniz mi?

Tarayıcıda geliştirici araçlarını açıp Elements ve Styles panellerine bakmak, uygulanan ve geçersiz kalan stilleri incelemenin en pratik yollarından biridir.

10. Sık Sorulan Sorular

CSS bir programlama dili midir?

CSS, web sayfalarının sunumunu tanımlayan bir stil dilidir. Geleneksel anlamda genel amaçlı bir programlama dili olarak değerlendirilmez.

CSS öğrenmeden web sitesi yapılabilir mi?

Evet, HTML ile temel içerik sayfaları oluşturulabilir. Ancak modern, okunaklı ve farklı ekranlara uyumlu arayüzler hazırlamak için CSS öğrenmek büyük avantaj sağlar.

Class mı, ID mi kullanmalıyım?

Tekrar kullanılabilen tasarım kuralları için çoğunlukla class tercih edilir. id, sayfa içinde benzersiz olması gereken hedefler için uygundur.

CSS için ayrı bir program gerekli mi?

Hayır. CSS dosyaları herhangi bir metin editöründe yazılabilir. Visual Studio Code gibi kod editörleri, sözdizimi renklendirme ve otomatik tamamlama özellikleriyle işi kolaylaştırır.

11. Sonuç

CSS, HTML ile oluşturulan içeriği görsel olarak düzenlemenin temel aracıdır. Bu derste CSS'in temel sözdizimini, harici stil dosyası bağlantısını, element–class–ID seçicilerini, sözde sınıfları ve cascade mantığını öğrendiniz.

Alıştırma: Tanıtım kartını iki farklı renk temasıyla tasarlayın. Başlık ve bağlantı renklerini değiştirin; klavyeyle bağlantıya odaklanarak :focus-visible kuralını test edin.

Nizokka Akademi serisinin bir sonraki yazısında CSS Box Model konusunu, yani margin, padding ve border arasındaki farkları örneklerle öğreneceğiz.

CSS Nedir? CSS Seçicileri ve İlk Stil Dosyanız