CSS Nedir ve Ne İşe Yarar?

CSS Nedir?​

CSS (Cascading Style Sheets), web sayfalarının görünümünü düzenlemek için kullanılan bir stil tanımlama dilidir.
HTML bir sayfanın iskeletini oluştururken, CSS o iskeletin tasarımını ve estetiğini sağlar.
Kısacası:

HTML ne gösterileceğini, CSS nasıl gösterileceğini belirler.

Genişletmek için tıkla ...

Bir web sitesinin renkleri, yazı tipleri, kenar boşlukları, arka planı ve düzeni CSS sayesinde kontrol edilir.

---

CSS Ne İşe Yarar?​

CSS, bir web sitesinin görünümünü merkezi olarak yönetmeyi sağlar.
Bir sayfada binlerce HTML etiketi olsa bile, sadece birkaç satır CSS kodu ile tüm tasarımı değiştirmek mümkündür.

CSS ile yapabileceklerin bazıları:​

• Arka plan renkleri ve resimleri eklemek
• Yazı tipi (font) ve renk ayarlamak
• Sayfa düzenini grid veya flex yapısı ile oluşturmak
• Buton, tablo ve menüleri şekillendirmek
• Web sitesini mobil cihazlara uyumlu hale getirmek (responsive design)

---

CSS ve HTML Arasındaki Fark​

Özetle:
HTML sayfanın iskeletiyse, CSS o iskelete hayat veren “görsel giyimidir.”

---

CSS’in Temel Yapısı​

CSS kodları genellikle şu biçimde yazılır:

Açıklama:​

• p → Hedeflenen HTML etiketi (seçici – selector)
• {} → Stil kurallarının tanımlandığı blok
• color → Özellik (property)
• blue → Değer (value)

Yani bu örnek, sayfadaki tüm <p> (paragraf) etiketlerinin yazı rengini mavi yapar.

---

CSS Türleri​

İpucu:
Büyük projelerde mutlaka external CSS (harici stil dosyası) kullanılmalıdır. Bu yöntem hem site hızını artırır hem de yönetimi kolaylaştırır.

---

CSS Seçiciler (Selectors)​

Seçiciler, hangi HTML öğesine stil uygulanacağını belirler.

En yaygın kullanılan CSS seçiciler:​

---

CSS Özellikleri ve Kullanım Alanları​

---

Responsive (Mobil Uyumlu) CSS​

Modern web siteleri, her ekran boyutunda düzgün görünmelidir.
Bu uyumluluk responsive design (duyarlı tasarım) ile sağlanır.

Örnek Media Query:​

Bu kod, ekran genişliği 768 pikselden küçük olan cihazlarda yazı boyutunu küçültür.
İpucu:
Responsive tasarımlar hem kullanıcı deneyimini hem SEO puanını yükseltir.

---

CSS Frameworkleri​

CSS yazmak bazen zaman alıcı olabilir.
Bu nedenle tasarımı hızlandıran hazır framework’ler kullanılır.
Öneri:
Eğer sade ama güçlü bir yapı istiyorsan Tailwind CSS, görsel bileşenlerle hızlı sonuç almak istiyorsan Bootstrap kullan.

---

CSS ile Yapılabilecek Görsel Efektler​

CSS sadece renk ve font düzenlemekle kalmaz, animasyonlar ve geçiş efektleri de oluşturabilir.

Örnek: Hover (üzerine gelince renk değiştirme)​

Bu örnekte butonun üzerine gelindiğinde rengi yumuşak geçişle değişir.

---

CSS Dosya Organizasyonu​

Profesyonel web sitelerinde CSS kodları genellikle şu şekilde bölünür:
Bu yöntem hem okunabilirliği artırır hem de bakım sürecini kolaylaştırır.

---

Sık Sorulan Sorular (S.S.S)​

1. CSS nedir?
Web sayfalarının görünümünü ve düzenini tanımlayan bir stil dilidir.
2. CSS bir programlama dili midir?
Hayır, CSS bir biçimlendirme (stil) dilidir, mantıksal işlemler yapmaz.
3. CSS nasıl çalışır?
HTML yapısını hedef alır ve seçiciler aracılığıyla görsel stiller uygular.
4. CSS mi, HTML mi önce öğrenilmeli?
HTML öğrenmeden CSS kullanmak mümkün değildir; bu yüzden önce HTML, sonra CSS öğrenilmelidir.
5. CSS SEO’ya katkı sağlar mı?
Evet. Mobil uyumluluk, sayfa hızı ve kullanıcı deneyimi üzerinden SEO’ya dolaylı katkı sağlar.

---

Sonuç:
CSS, modern web tasarımının görsel kalbidir.
HTML’in oluşturduğu yapıyı şekillendirir, düzenler ve estetik kazandırır.
İster kişisel bir blog, ister profesyonel bir şirket sitesi yap — CSS olmadan web sayfan sade, renksiz ve işlevsiz kalır.
Kısacası: HTML kemikse, CSS onun derisidir.