CSS, web sayfasındaki içeriğin nasıl görüneceğini belirleyen stil dilidir. Renkler, yazı tipleri, boşluklar ve ekran genişliğine göre değişen yerleşimler CSS ile düzenlenir. E-ticarette küçük bir stil değişikliği ürün kartını veya ödeme formunu etkileyebilir. Bu nedenle düzenlemeleri yalnız tek ekranda değil, farklı cihaz ve sayfa türlerinde kontrol edin.
CSS nedir?
CSS, açılımıyla Cascading Style Sheets (Basamaklı Stil Sayfaları), HTML ya da XML ile yazılmış bir belgenin nasıl sunulacağını tanımlayan stil sayfası dilidir. Öğelerin ekranda, baskıda ya da sesli okuma yazılımında nasıl işleneceğini belirler. CSS, açık webin temel dillerinden biridir ve tarayıcılar arasında W3C belirtimlerine göre standartlaştırılır. Sık yapılan bir hataya dikkat: CSS bir programlama dili değil, bir biçimlendirme ve sunum dilidir.
Ekim 1994 Håkon Wium Lie'nin ilk CSS önerisi
Aralık 1996 CSS Level 1'in W3C önerisi olması
Mayıs 1998 CSS Level 2
60+ 2016 itibarıyla CSS modülü sayısı
CSS3'ten sonra tek bir "CSS4" sürümü çıkmadı. W3C artık CSS'i renkler, yerleşim, yazı tipleri gibi ayrı modüller hâlinde geliştiriyor ve her modülün kendi seviyesi var; örneğin CSS Color Module Level 5.
HTML, CSS ve JavaScript arasındaki fark
| Dil | Görevi | E-ticaret sitesinde örnek |
|---|---|---|
| HTML | İçerik ve yapı | Ürün adı, fiyat, açıklama, "Sepete ekle" düğmesi |
| CSS | Görünüm ve yerleşim | Düğmenin rengi, ürün kartlarının telefonda tek sütuna inmesi |
| JavaScript | Davranış ve etkileşim | Varyant seçilince fiyatın değişmesi, sepetin açılması |
CSS nasıl çalışır?
Bir CSS kuralı üç parçadan oluşur: hangi öğeye uygulanacağını söyleyen seçici, neyin değişeceğini söyleyen özellik ve değer. Örneğin "tüm ürün başlıkları" seçicisine "yazı boyutu" özelliği ve "20 piksel" değeri verilir. Adındaki "basamaklı" kelimesi, aynı öğeye birden fazla kural uygulandığında hangisinin geçerli olacağını belirleyen sıralamayı anlatır: daha özel seçici ve daha sonra gelen kural öncelik kazanır.
CSS sayfaya üç yolla eklenir: ayrı bir stil dosyasıyla, sayfanın başındaki stil bloğuyla ya da tek bir öğenin style özniteliğiyle. Doğru yöntem ayrı dosyadır; tarayıcı bu dosyayı bir kez indirip önbelleğe alır ve tüm sayfalarda kullanır. Öğe üzerine yazılan satır içi stiller ise bakımı zorlaştırır.
CSS web tasarımında neden önemlidir?
- Tutarlılık: Renk, yazı tipi ve düğme stili tek dosyada tanımlanır; bir değişiklik bütün sayfalara yansır.
- Duyarlı tasarım: Medya sorguları ve container queries sayesinde aynı sayfa telefonda, tablette ve masaüstünde farklı dizilir.
- Hız: Önbelleğe alınan tek stil dosyası, her sayfada tekrar tekrar yüklenen stillerden hafiftir.
- Erişilebilirlik: Odak çerçevesi, renk kontrastı ve hareket azaltma tercihi CSS ile yönetilir.
- Arama motorları: Google sayfayı işlerken CSS ve JavaScript dosyalarına ihtiyaç duyar; bu dosyaları robots.txt ile engellemek sayfanın doğru anlaşılmasını zorlaştırabilir.
Modern CSS: bugün tüm tarayıcılarda çalışan özellikler
Eskiden sayfa düzeni için hileler ve ek kütüphaneler gerekirdi. Bugün Flexbox (Mart 2018'den beri yaygın kullanılabilir) tek eksende, Grid (Nisan 2020'den beri yaygın) iki eksende yerleşimi kolaylaştırır. Bileşenin kendi genişliğine göre düzen değiştirmesini sağlayan container queries, içeriğe göre stil vermeye yarayan :has() ve iç içe yazılabilen CSS de artık tüm büyük tarayıcılarda çalışıyor. Bu özelliklerin tasarıma etkisini 2026 web tasarım trendleri yazımızda ele aldık.
E-ticaret sitenizde CSS'e nerede dokunursunuz?
Hazır altyapılar çoğu görsel ayarı tema panelinden verir; ancak ince ayar için özel CSS alanı da sunar. Shopify'da tema düzenleyicisinde tüm tema ya da tek bir bölüm için "Custom CSS" alanı vardır; ödeme sayfasında özel CSS desteklenmez. WordPress ve WooCommerce'te blok temalarda Site Düzenleyici'nin Stiller bölümünden, klasik temalarda Özelleştir ekranındaki "Ek CSS" alanından stil eklenir.
Dikkat: Temanın kendi dosyalarını doğrudan düzenlemek yerine altyapının sunduğu özel CSS alanını kullanın. Tema güncellendiğinde doğrudan dosyaya yazılan değişiklikler silinebilir.
- Değişikliği tanımlayın Hangi sayfada, hangi öğenin nasıl görünmesi gerektiğini ekran görüntüsüyle not edin.
- Önce tema ayarlarına bakın Renk, yazı tipi ve boşluk ayarı panelde varsa CSS'e gerek kalmaz.
- Özel CSS alanını kullanın Kuralı küçük tutun ve ne işe yaradığını açıklama satırıyla belirtin.
- Mobilde test edin Değişikliğin telefonda düzeni bozmadığını ve sayfa hızını düşürmediğini kontrol edin.
Tasarımı kodlamaya geçmeden önce hazırlamak için Figma nedir yazımıza, sayfa hızının ölçümü için Speed Index rehberimize göz atabilirsiniz. Tema düzenlemelerini ve kurumsal site tasarımını baştan sona yürütmemizi isterseniz web tasarım hizmetimizi inceleyin.
Sık sorulan sorular
CSS bir programlama dili mi?
Hayır. CSS, bir belgenin nasıl görüneceğini tanımlayan stil sayfası dilidir. Mantık ve davranış JavaScript gibi programlama dilleriyle yazılır.
CSS ile HTML arasındaki fark nedir?
HTML sayfadaki içeriği ve yapıyı, CSS bu içeriğin renk, yazı tipi, boşluk ve yerleşim gibi görünümünü belirler.
CSS öğrenmek zor mu?
Temel kuralları kısa sürede öğrenilir; seçici, özellik ve değer mantığını kavramak yeterlidir. Duyarlı yerleşim ve basamaklı öncelik kuralları ise pratik gerektirir. MDN Web Docs ücretsiz ve güncel bir başlangıç kaynağıdır.
CSS SEO'yu etkiler mi?
Dolaylı olarak etkiler. Google sayfayı işlerken CSS dosyalarını kullanır; bu dosyaları engellemek sayfanın anlaşılmasını zorlaştırabilir. Ağır ve düzensiz CSS de sayfa hızını düşürür.
Kaynaklar
- MDN Web Docs, CSS (28.09.2026)
- W3C, A brief history of CSS until 2016 (28.09.2026)
- webstatus.dev, Baseline verileri (28.09.2026)
- Google Search Central, JavaScript SEO temelleri (28.09.2026)
- Shopify Yardım Merkezi, Adding custom CSS (28.09.2026)
- WordPress, CSS (28.09.2026)
