Aynı içeriğe sahip iki web sitesinden biri sade ve davetkâr, diğeri çirkin ve dağınık görünebilir. Aradaki fark çoğu zaman tek bir teknolojidir: CSS. HTML bir sayfanın iskeletini kurarken, CSS ona kimlik, renk ve düzen kazandırır. Bu yazıda CSS'in ne olduğunu ve ne işe yaradığını sade bir dille anlatıyoruz.
CSS Nedir?
CSS (Cascading Style Sheets), web sayfalarının görünümünü ve düzenini tanımlayan bir stil dilidir. Renkler, yazı tipleri, boşluklar, hizalama, arka planlar ve sayfanın genel yerleşimi CSS ile belirlenir. HTML "bu bir başlıktır" derken, CSS "bu başlık lacivert, ortalı ve 32 piksel olsun" der.
CSS Nasıl Çalışır?
CSS, HTML öğelerini hedefleyen kurallardan oluşur. Bir "seçici" (hangi öğe) ve ona uygulanacak "özellikler" (renk, boyut, boşluk vb.) içerir. Örneğin tüm paragrafların gri ve belirli bir boyutta olmasını sağlayabilir ya da yalnızca belirli bir bölümü hedefleyebilirsiniz. CSS genellikle ayrı bir dosyada tutulur; böylece tek bir dosyayı değiştirerek tüm sitenin görünümünü güncelleyebilirsiniz.
Responsive Tasarım ve CSS
CSS'in en güçlü yönlerinden biri, sayfayı farklı ekran boyutlarına uyarlamasıdır. "Media query" adı verilen kurallarla, site telefonda, tablette ve masaüstünde farklı şekilde görünebilir. Bugün mobil uyumluluk hem kullanıcı hem Google için zorunluluk olduğundan, CSS modern web tasarımının kalbindedir. CSS, HTML iskeletini güzelleştirir; ikisinin ilişkisini HTML nedir yazımızda, sitenizi yayına almayı ise web sitesi nasıl kurulur rehberimizde bulabilirsiniz.
Sık Sorulan Sorular
CSS bir programlama dili mi?
Hayır. CSS bir stil (biçimlendirme) dilidir; sayfanın nasıl görüneceğini tanımlar ama programlama mantığı içermez.
CSS olmadan site olur mu?
Olur ama çok sade ve biçimsiz görünür; tüm renk, düzen ve tipografi CSS ile gelir. Profesyonel bir site için CSS şarttır.
CSS'i nereye yazarım?
En iyi yöntem, ayrı bir .css dosyasında tutup HTML'e bağlamaktır; böylece tek dosyadan tüm sitenin görünümünü yönetirsiniz.
Media query nedir?
Ekran boyutuna göre farklı stiller uygulamayı sağlayan CSS kuralıdır; responsive (mobil uyumlu) tasarımın temelidir.
CSS framework'leri (Bootstrap vb.) ne işe yarar?
Hazır CSS bileşenleri sunarak tasarımı hızlandırır; sıfırdan yazmak yerine hazır, test edilmiş stilleri kullanmanızı sağlar.
Sonuç
CSS, web sayfalarına renk, düzen ve mobil uyum kazandıran tasarım dilidir; HTML ve JavaScript ile birleştiğinde modern bir web deneyimi oluşturur. Sitenizi hızlı ve güvenilir biçimde yayınlamak için Vulut hosting çözümlerini inceleyebilirsiniz.
