# CSS (Basamaklı Stil Sayfaları)

Adres: https://softwaredictionary.org/tr/terimler/css
Kategori: Web Geliştirme
Son güncelleme: 2026-09-29

Kısaca: CSS, HTML içeriğinin ekranda renk, yazı tipi, boşluk, yerleşim ve animasyon gibi yönlerden nasıl görüneceğini belirleyen stil sayfası dilidir.

## CSS nedir?

CSS, tarayıcıya HTML'de tanımlanan öğelerin nasıl gösterileceğini söyler. Öğeleri seçen kurallar yazar ve `color`, `font-size` ya da `margin` gibi özelliklere (property) değer verirsiniz; tarayıcı da sayfayı çizerken bunları uygular.

Basamaklı (cascading) ifadesi, birden fazla kural aynı öğeyi hedeflediğinde tarayıcının hangisinin geçerli olacağına nasıl karar verdiğini anlatır. Tarayıcı her kuralın nereden geldiğine, seçicisinin ne kadar belirleyici (specific) olduğuna (ID sınıftan, sınıf etiket adından güçlüdür) ve kuralların yazılış sırasına bakar. Basamak (cascade) ve belirleyiciliği (specificity) anlamak, görmezden gelinmiş gibi duran stilleri ayıklamanın anahtarıdır.

Modern CSS güçlü yerleşim sistemleri sunar: tek bir satır ya da sütundaki öğeleri düzenlemek için Flexbox, satır ve sütunlarla iki boyutlu yerleşimler için Grid. Media query'ler ve container query'ler bir tasarımın farklı ekran boyutlarına uyum sağlamasını mümkün kılar; buna duyarlı tasarım (responsive design) denir. CSS değişkenleri olarak da bilinen özel özellikler (custom properties) ise marka renkleri gibi değerleri tüm sitede yeniden kullanmanıza olanak tanır.

CSS çoğu zaman Sass gibi ön işlemcilerle ya da Tailwind gibi yardımcı sınıf framework'leriyle karıştırılır. Bunlar CSS üreten veya düzenleyen araçlardır; tarayıcının kendisi ise yalnızca düz CSS'i anlar.

## Önemli noktalar

- CSS, HTML'in görsel sunumunu kontrol eder.
- Kural, bir seçici ile bir veya daha fazla özellik-değer çiftinden oluşur.
- Basamak ve belirleyicilik, çakışma durumunda hangi kuralın kazanacağını belirler.
- Flexbox ve Grid, sayfa yerleşiminin ana araçlarıdır.
- Media query'ler tasarımları ekran boyutuna duyarlı hale getirir.

## Örnek: CSS ile bir düğmeyi biçimlendirmek

```css
/* A reusable color stored in a custom property */
:root {
  --brand: #2563eb;
}

/* Select every element with the class "button" */
.button {
  background-color: var(--brand);
  color: white;
  padding: 0.5rem 1rem;
}

/* Slightly fade the button on mouse hover */
.button:hover { opacity: 0.9; }
```

## Sık sorulan sorular

**CSS bir programlama dili midir?**

CSS genellikle genel amaçlı bir programlama dili değil, stil sayfası dili olarak tanımlanır. Bildirimseldir (declarative): şeylerin nasıl görünmesi gerektiğini siz tarif edersiniz, nasıl çizileceğini tarayıcı çözer.

**Flexbox ile Grid arasındaki fark nedir?**

Flexbox öğeleri tek bir satır ya da sütun boyunca düzenler; bu da gezinme çubukları ve araç çubukları için uygundur. Grid ise öğeleri aynı anda satır ve sütunlar halinde düzenler; bu da tam sayfa yerleşimleri ve kart galerileri için uygundur.

**CSS'te specificity ne demektir?**

Specificity (belirleyicilik), birden fazla kural aynı öğeyle eşleştiğinde hangisinin uygulanacağına karar vermek için tarayıcının her seçiciye verdiği ağırlıktır. ID seçiciler sınıf seçicilerden, sınıf seçiciler de öğe seçicilerinden daha belirleyicidir.

## Kaynaklar

- [MDN: CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)

---

Software Dictionary: https://softwaredictionary.org/tr · https://softwaredictionary.org/tr/llms.txt