🎨 CSS Nedir?
CSS (Cascading Style Sheets), web sayfalarına stil katan dildir. HTML ile yapıyı kurarsın, CSS ile görünüşü ayarlarsın. Renkleri, yazı tiplerini, boşlukları, butonları ve sayfa düzenini CSS belirler. Web’e estetik katan şey budur.
🧾 Ne İşe Yarar?
CSS olmadan tüm web siteleri siyah beyaz olurdu ve birbirine benzerdi. CSS sayesinde:
- Arka plan renkleri ve görselleri eklenir.
- Yazı tipi, boyutu ve rengi ayarlanır.
- Kutular, kenarlıklar, gölgeler oluşturulur.
- Sayfa düzeni (kutu kutu tasarımlar, bölümler, menüler) kurulur.
- Mobil uyumluluk sağlanır.
- Kenar boşlukları (margin/padding), çerçeveler (border) belirlenebilir
Yani CSS, sitenin görünümünü baştan sona şekillendirir.
Nasıl Çalışır?
CSS, HTML’deki öğelere stil ekler. Üç farklı şekilde kullanılabilir:
- Satır içi (inline): HTML etiketi içine direkt yazılır.
<p style="color:red;">Merhaba</p> - Sayfa içi (internal): HTML dosyasının
<head>kısmına eklenir.<style> p { color: red; } </style> - Harici dosya (external): Ayrı bir
.cssdosyasına yazılır. En çok tercih edilen yöntem budur.<link rel="stylesheet" href="stil.css">
CSS’de kurallar şu şekilde yazılır:
h1 {
color: blue;
font-size: 24px;
}
Bu örnekte tüm <h1> başlıkları mavi renkte ve 24 piksel boyutunda olur.
Neden “Cascading”?
“Cascading” kelimesi, stil kurallarının öncelik sırasına göre uygulanmasını ifade eder. Yani bir öğeye birden fazla stil tanımlanmışsa, tarayıcı hangisinin geçerli olacağına belli kurallara göre karar verir.
Neler Yapılabilir?
- Duyarlı (responsive) tasarımlar oluşturulabilir.
- Grid ve Flexbox sistemleriyle modern sayfa düzenleri kurulabilir.
- Animasyonlar ve geçiş efektleri eklenebilir.
- Karanlık mod gibi temalar hazırlanabilir.
CSS sadece süs değil, aynı zamanda kullanıcı deneyimi için kritik bir araçtır.
HTML ve CSS Arasındaki Fark
- HTML: Ne gösterileceğini tanımlar.
- CSS: Nasıl görüneceğini tanımlar.
Birini çıkardığında ya yapı kalmaz ya da estetik. İkisi birlikte çalışır.
Sık Kullanılan CSS Özellikleri
| Özellik | Açıklama |
|---|---|
color | Yazı rengi |
background-color | Arka plan rengi |
font-size | Yazı boyutu |
font-family | Yazı tipi |
margin | Dış boşluk |
padding | İç boşluk |
border | Kenarlık |
width / height | Genişlik / Yükseklik |
display | Görüntüleme türü (block, inline, flex vs.) |
position | Konumlandırma (static, relative, absolute, fixed) |
🧠 Kısaca Özet
- Öğrenmesi kolaydır, ancak derinleştikçe çok güçlü hale gelir.
- CSS, HTML’in görsel halini kontrol eder.
- Web sitelerinin profesyonel, şık ve mobil uyumlu olmasını sağlar.
- Günümüzde tüm modern web sitelerinde kullanılır.