CSS Nedir?
CSS Nedir? (Cascading Style Sheets)
CSS (Cascading Style Sheets), web sayfalarının görsel tasarımını kontrol eden stil dilidir. HTML, sayfanın iskeletini oluştururken; CSS, renkleri, yazı tiplerini, düzeni ve hatta animasyonları belirler. Kısacası, bir web sitesinin ruhunu CSS oluşturur.
CSS’in Tarihçesi
CSS ilk olarak 1996 yılında W3C tarafından standartlaştırıldı. Başlangıçta yalnızca yazı tipi ve renk düzeni için kullanılan CSS, günümüzde grid sistemleri, flexbox, animasyonlar ve değişkenler gibi modern özelliklerle güçlü bir dil haline geldi.
CSS Çeşitleri
- Inline CSS ????: HTML etiketinin içine yazılır.
<h1 style="color:red"> - Internal CSS ????:
<style>etiketi içinde bulunur. - External CSS ????: Ayrı bir .css dosyası olarak çağrılır. Büyük projelerde tercih edilir.
CSS’in Avantajları
| Özellik | Açıklama | Örnek |
|---|---|---|
| ???? Görsellik | Web sitesine renk, tipografi ve tasarım kazandırır. | Arka plan rengi, font seçimi |
| ???? Responsive | Tüm cihazlarda uyumlu görünüm sağlar. | @media queries |
| ⚡ Performans | Aynı stil bir kez yazılır, tüm sayfada geçerli olur. | Tek CSS dosyası |
| ???? Esneklik | Kod tekrarını azaltır, düzenlemeyi kolaylaştırır. | class kullanımı |
CSS Kod Örneği
/* Basit bir CSS örneği */body { background-color: #fafafa; font-family: Arial, sans-serif;}h1 { color: #4CAF50; text-align: center;}Öğrenciler İçin CSS İpuçları
- Her zaman basitten karmaşığa doğru ilerleyin.
- Kendi renk paletinizi oluşturun ????
- Mobil cihazlarda test etmeyi unutmayın ????
- W3C standartlarına uygun yazın ✅
CSS ile Responsive Tasarım
Responsive tasarım, modern web siteleri için olmazsa olmazdır. CSS ile @media sorguları kullanarak ekran boyutuna göre farklı düzenler oluşturabilirsiniz.
@media (max-width: 768px) { body { font-size: 14px; } nav { display: none; }}CSS ve Modern Teknikler
Günümüzde Flexbox ve CSS Grid sayesinde düzenler çok daha kolay oluşturulabiliyor. Ayrıca CSS Variables ile temalar arasında hızlı geçiş yapılabiliyor.
CSS ile Animasyonlar
Küçük animasyonlar sitenize canlılık katar. Örneğin:
@keyframes renkDegis { 0% {color: red;} 50% {color: blue;} 100% {color: green;}}h1 { animation: renkDegis 3s infinite;}Sonuç
CSS olmadan bir web sitesi yalnızca siyah-beyaz bir metin yığını olurdu. CSS sayesinde siteler kullanıcı dostu, estetik ve modern hale gelir.
