CSS Nedir?
CSS (Cascading Style Sheets), HTML ile oluşturulan web sayfalarının görsel tasarımını düzenlemek için kullanılan bir stil dilidir. CSS, web geliştiricilere web sayfalarının görünümünü kontrol etme imkanı sağlar ve HTML’in içerik yapısını stil bilgilerinden ayırarak daha temiz ve yönetilebilir kod yazmaya olanak tanır.
CSS’nin Temel Özellikleri
1. CSS Seçicileri
CSS, HTML elementlerine stil uygulamak için seçiciler kullanır. En yaygın kullanılan seçiciler şunlardır:
- Element Seçicileri: Belirli bir HTML elementini seçer. Örneğin,
pseçicisi tüm paragraf (<p>) elementlerini hedefler. - Class Seçicileri: Belirli bir sınıfa ait elementleri seçer.
.sembolü ile kullanılır. Örneğin,.className. - ID Seçicileri: Belirli bir ID’ye sahip elementleri seçer.
#sembolü ile kullanılır. Örneğin,#idName. - Evrensel Seçici: Tüm elementleri seçer.
*sembolü ile kullanılır. - İlişkisel Seçiciler: Belirli bir hiyerarşiye göre elementleri seçer. Örneğin,
div piç içe geçmişdiviçindeki tüm paragraf elementlerini seçer.
2. CSS Kuralları ve Bildirimleri
Bir CSS kuralı, seçici ve bildirim bloğundan oluşur. Bildirim bloğu, stil özellikleri ve değerlerinden oluşur. Örneğin:
cssKodu kopyalap { color: blue; font-size: 14px; }
Burada p seçicisi tüm paragraf elementlerini hedefler ve color ile font-size bildirimlerini uygular.
3. CSS Özellikleri
CSS’de kullanılabilecek birçok özellik vardır. Bunlar arasında renk, metin hizalama, kenarlık, arka plan ve daha birçok stil özelliği bulunur. Örneğin:
- color: Metin rengini ayarlar.
- background-color: Arka plan rengini ayarlar.
- font-size: Metin boyutunu ayarlar.
- margin: Dış boşlukları ayarlar.
- padding: İç boşlukları ayarlar.
- border: Kenarlık özelliklerini ayarlar.
4. CSS Yöntemleri
CSS stil bilgilerini HTML belgelerine eklemenin üç ana yolu vardır:
- Inline CSS: HTML elementlerine
styleözelliği ile eklenir. Örneğin,<p style="color:blue;">. - Internal CSS: HTML belgesinin
<head>bölümüne<style>etiketi ile eklenir. - External CSS: Ayrı bir
.cssdosyasına yazılır ve HTML belgesine<link>etiketi ile bağlanır. Örneğin:
htmlKodu kopyala<link rel="stylesheet" href="styles.css">
CSS’nin Avantajları
- Tekrar Kullanılabilirlik: Bir kez tanımlanan stil kuralları, birden fazla HTML belgesinde kullanılabilir.
- Bakım Kolaylığı: Stil ve içerik ayrıldığından, stil değişiklikleri merkezi bir dosyada yapılarak tüm web sitesi güncellenebilir.
- Daha Hızlı Yükleme Süresi: CSS, dosya boyutunu küçültür ve tarayıcı önbelleklemesini optimize eder.
- Esneklik ve Kontrol: CSS, web sayfalarının farklı cihazlar ve ekran boyutlarına uyumlu hale getirilmesini sağlar (responsive design).
CSS ile İlgili Yönlendirmeler
Öğrenme Kaynakları
- MDN Web Docs – CSS: Mozilla’nın CSS üzerine kapsamlı dökümantasyonu.
- W3Schools CSS Tutorial: Temel ve ileri seviye CSS konularını ele alan interaktif eğitimler.
- CSS Tricks: Güncel CSS teknikleri ve makaleleri.
Araçlar ve Kütüphaneler
- Bootstrap: Modern ve duyarlı web tasarımları için popüler bir CSS frameworkü.
- Sass: CSS için daha güçlü özellikler sağlayan bir CSS preprocessor.
- PostCSS: CSS geliştirme sürecini optimize eden bir araç.
Sonuç
CSS, web sayfalarının görünüm ve hissiyatını kontrol etmenin anahtarıdır. CSS ile, HTML’in yapı ve içeriğini stil bilgilerinden ayırarak daha düzenli ve verimli web siteleri oluşturmak mümkündür. Modern web geliştirme dünyasında CSS, öğrenilmesi ve ustalaşılması gereken temel bir beceridir.
