CSS Nedir? Tasarımın Web’deki Karşılığı

CSS (Cascading Style Sheets, Türkçesiyle "basamaklı stil sayfaları"), web sayfasının nasıl görüneceğini belirleyen dildir: renkler, yazı tipleri, boşluklar, sütunlar ve sayfanın telefonda nasıl dizileceği. HTML içeriğin ne olduğunu söyler, CSS o içeriğe kimliğinizi giydirir. Kurumsal kimliğinizin web'deki karşılığı büyük ölçüde CSS'tir.

CSS nedir?

MDN'in tanımıyla CSS, HTML ya da XML ile yazılmış bir belgenin sunumunu tarif eden bir stil sayfası dilidir. Yani öğelerin ekranda, kâğıtta, sesli okumada ya da başka ortamlarda nasıl görüntüleneceğini belirler. CSS, W3C'nin belirlediği şartnamelere göre tarayıcılar arasında standartlaştırılmıştır.

Bir CSS kuralı şöyle görünür:

“css .buton-birincil { background: #00ACA0; color: #0B0B0D; padding: 12px 24px; border-radius: 8px; } “

Bu kural, buton-birincil sınıfına sahip her düğmenin zemin rengini, yazı rengini, iç boşluğunu ve köşe yuvarlaklığını belirler. Sitede yüz tane böyle düğme olsa da hepsi bu tek kuraldan beslenir. Rengi değiştirmek istediğinizde tek satırı değiştirirsiniz.

"Basamaklı" ne demek?

Aynı öğeye birden fazla kural uygulanabilir: tarayıcının varsayılan stilleri, temanın stilleri, sizin eklediğiniz özel stiller. Dilin adındaki "basamaklı" (cascading) sözcüğü, bu kuralların belli bir öncelik sırasıyla üst üste binmesinden gelir. Daha özel ve daha sonra yazılan kural genelde kazanır. Bu yapı esneklik sağlar ama düzensiz yönetildiğinde "bu renk neden değişmiyor?" sorusunun da kaynağıdır.

CSS3 diye bir sürüm var mı?

"CSS3" adı yaygın olarak kullanılsa da tek bir CSS3 belgesi yoktur. W3C'nin Aralık 2023 tarihli CSS anlık görünümüne (CSS Snapshot 2023) göre CSS, geleneksel anlamda sürümlere değil seviyelere sahiptir. CSS 2.1'den sonra dil, renkler, yazı tipleri, seçiciler, yerleşim gibi ayrı modüllere bölündü ve her modül kendi hızında gelişiyor. Aynı belge, "CSS Level 4" diye bir şey olmadığını; tek tek modüllerin 4. seviyeye ulaşabileceğini açıkça belirtiyor. Yani "sitemiz CSS4 ile yapıldı" gibi bir ifade teknik olarak anlamsızdır.

Nasıl çalışır?

Tarayıcı HTML'i okurken bağlı CSS dosyalarını da indirir. Ardından her öğe için hangi kuralların geçerli olduğunu hesaplar ve sayfayı çizer. CSS dosyası inmeden sayfa düzgün çizilemeyeceği için, tarayıcı çoğu durumda CSS'i bekler. Bu yüzden CSS'in boyutu ve sayısı, sayfanın ilk açılış süresini etkiler.

CSS'in işletmeler için en görünür etkisi mobil uyumdur. Medya sorguları (media queries), ekran genişliğine göre farklı kurallar uygulamayı sağlar:

“css @media (max-width: 768px) { .hizmetler { grid-template-columns: 1fr; } } “

Bu kural, geniş ekranda yan yana duran hizmet kutularını telefonda alt alta dizer. Flexbox ve Grid adı verilen modern yerleşim modülleri de bu tür düzenleri eskiye göre çok daha az kodla kurmayı sağlar.

Google'ın Ekim 2023'te mobil öncelikli dizine geçişi tamamladığını duyurduğunu da hatırlatalım: Google artık siteleri büyük ölçüde mobil görünümleri üzerinden değerlendiriyor. Telefonda bozulan bir düzen, yalnızca ziyaretçiyi değil arama görünürlüğünü de etkileyebilir.

Web sitenize ve işinize etkisi

Marka tutarlılığı

Kurumsal kimlik kılavuzunuzda tanımlı renkler, yazı tipleri ve boşluk kuralları web'de CSS ile hayata geçer. Doğru kurulmuş bir yapıda bu değerler bir kez tanımlanır (ör. CSS değişkenleriyle --marka-ana-renk) ve her yerde aynı değer kullanılır. Böylece sitenin bir köşesinde "biraz farklı bir mavi" çıkmaz. Logonun tek başına değil, bütün bir sistemle anlam kazandığını logo ile kurumsal kimlik farkı yazımızda anlatmıştık. CSS ise bu sistemin web'deki uygulamasıdır.

Bakım maliyeti

Her sayfaya tek tek, satır içi stil verilmiş bir site, ilk bakışta düzgün görünebilir. Ama bir renk ya da yazı tipi değişikliği istediğinizde onlarca sayfayı tek tek düzeltmek gerekir. Merkezi ve düzenli CSS, değişiklik maliyetini düşürür.

Hız

Kullanılmayan CSS'in de indirilmesi gerekir. Pek çok eklenti ve tema, kullanmadığınız bileşenler için de stil dosyası yükler. Birkaç küçük dosya sorun değildir; ama gereksiz büyük stil dosyaları, özellikle mobil bağlantıda ilk görüntünün gecikmesine yol açar.

Erişilebilirlik ve okunabilirlik

Yazı ile zemin arasındaki kontrast, yazı boyutu ve satır aralığı CSS ile belirlenir. Açık gri zemin üzerine açık gri yazı şık görünebilir ama okunmaz. Kullanıcı deneyimi açısından bunun önemini kullanıcı arayüzü (UI) yazımızda da ele almıştık.

Sık yapılan hatalar

• Masaüstüne göre tasarlayıp telefonu sonradan düşünmek: Ziyaretçilerin önemli bir kısmı telefondan geliyorsa, düzen önce orada çalışmalı.
• Satır içi stillerle "hızlı düzeltme": Kısa vadede çözüm gibi görünür, uzun vadede tutarsızlık üretir.
• Her şeyi !important ile zorlamak: Öncelik kurallarıyla savaşmak, sonraki her değişikliği zorlaştırır.
• Düşük kontrast: Marka rengi ne kadar güzel olursa olsun, metin okunmuyorsa iletişim kurulmaz.
• Ekran dışında kalan, yatay kayan sayfalar: Telefonda sayfanın yana kaydığını gösteren genişlik hataları, sitenin özensiz görünmesine yol açar.

Bizim deneyimimiz

Bir grafik tasarım geçmişinden geldiğimiz için web projelerinde CSS'i kurumsal kimliğin devamı olarak görüyoruz. Projelerimizde önce marka renklerini, yazı tiplerini ve boşluk ölçülerini bir tasarım sistemi olarak tanımlıyor, sonra sayfaları bu sistemle kuruyoruz. Böylece logo, katalog ve web sitesi aynı dili konuşuyor.

WordPress tabanlı sitelerimizde de bu değerleri tema düzeyinde, global renk ve yazı tipi ayarları olarak tanımlıyoruz. Böylece müşterimiz yeni bir sayfa eklediğinde marka standardında bir sayfa elde ediyor. Rengi ya da yazı tipini tek tek seçmek zorunda kalmıyor.

Sık sorulan sorular

Sonuç

CSS, tasarımın web'deki karşılığıdır: kimliğinizin renklerini, yazı tiplerini ve düzenini her ekrana taşır. İyi kurulduğunda sitenizi tutarlı, okunur ve kolay güncellenir kılar. Düzensiz kurulduğunda ise her küçük değişiklik bir maliyete dönüşür.

Markanızın web'de doğru yansıması için web tasarım ve marka ve kurumsal kimlik hizmetlerimize göz atabilir ya da bizimle iletişime geçebilirsiniz.