Teknoloji ve Dijital Dünya, Tüm Yazılar

CSS nedir? Ne işe yarar? Nerelerde kullanılır?

CSS nedir?

CSS (Cascading Style Sheets), HTML ve JavaScript gibi, internet sayfalarının kodlanmasında kullanılan 3 ana teknolojiden biridir.

CSS, bir HTML sayfasının nasıl görüntüleneceğini tarif eder. Bu tarifin içinde sayfadaki başlık, metin, resim, video gibi öğelerin görsel özelliklerinin yanı sıra, sayfa yerleşimi ve bu yerleşimin farklı ekranlarda, cihazlarda,ekran, kağıt ya da diğer ortamlarda nasıl değişeceği bilgisi de bulunur.

CSS’in tarihçesi hakkında kısa bilgi

CSS ilk kez 10 Ekim 1994 tarihinde, CERN’de Tim Barners-Lee ile birlikte çalışmakta olan Hakon Wium Lie tarafından önerilmiştir. Bunun ardından W3C (Dünya Çapındaki Ağ Birliği), çeşitli forum ve eposta listelerinde yapılan birkaç farklı stil sayfası dili taslağını da göz önünde bulundurarak, 1996 yılında ilk CSS önerisini sunmuştur (CSS1).

İnternet kullanımının yaygınlaşması ve kullanım amaçlarının çeşitlenmesiyle doğan yeni ihtiyaçlar, W3C’nin 12 Mayıs 1998’de CSS2 önerisini sunmasıyla sonuçlanmıştır. Bunun hemen ardından çalışmalarına başlanan CSS3 ise, tarayıcı desteği artmış olmasına rağmen 2016’da halen geliştirilme aşamasındadır.

İnternet safasının yapısı ve CSS

Yapısal olarak incelendiğinde internet sayfaları üç katmandan oluşur. Bu katmanlar önem ve uygulama sırasına göre içerik katmanı, görselleştirme katmanı ve etkileşim katmanıdır.

İçerik katmanı (HTML)

İçerik katmanı her intenet sayfasında mutlaka vardır. Sayfa sahibinin ziyaretçiye aktarmak istediği bilgi, HTML ile etiketlenerek bu katmanı oluşturur. Günümüzde internet sayfalarının içeriği ağırlıklı olarak metin olsa da, resim, animasyon, video gibi farklı ortamlar da içerik olarak kullanılmaktadır. Bu katmanda içeriğin nasıl görüntüleneceğine dair bilgi olmaz (olmaması gerekir).

Görselleştirme katmanı (CSS)

Görselleştirme katmanı, içeriğin sayfayı ziyaret eden kişiye nasıl gösterileceğini belirler. İçeriğin ekran boyutuna göre ayarlanması, yazı boyutunun belirlenmesi, renk, beyaz alan gibi görsel öğelerin tanımlanması bu katmanda yapılır. Görselleştirme katmanı için önerilen ve yaygın olarak kullanılan dil CSS’tir.

Etkileşim katmanı (JavaScript)

Etkileşim katmanı, kullanıcı ve sayfa arasındaki etkileşim yöntemlerini ve sonuçlarını tanımlar. Genellikle JavaScript ile kodlanır. Bir sayfanın ziyaretçi ile etkileşimi, formların kontrol edilmesi gibi basit işlemlerden, masaüstü yazılımlarına benzer kapsamlı web uygulamalara kadar çeşitlilik gösterebilir.

Neden CSS?

HTML, içeriğin nasıl görüntüleneceğini, sayfaya nasıl yerleşeceğini belirlemek için tasarlanmış bir dil değildir. HTML’nin amacı içeriği tarif etmek, içeriğin hiyerarşisini belirlemektir. Sayfanın başlığı nedir, sayfadaki bağlantılar hangileridir, alt alta dizili bu satırlar bir liste midir yoksa sıradan paragraflar mıdır? HTML’nin işi bu soruların cevaplarını vermektir. Başlık kırmızı mı olsun, logo büyük mü olsun, sol üstte mi olsun? HTML bunlara karışmaz.

CSS tam burada devreye girer. CSS’in işlevi neyin, nerede, nasıl görüntüleneceğini tarif etmektir. Mesela logonun sayfanın sol üst köşesini tamamıyla kaplayacak şekilde görüntülenmesi CSS’in sorumluluk alanındadır. Bir ay sonra logonun sağ üst köşenin tamamını kaplaması icap ettiğinde, HTML koduna veya logonun yer aldığı resim dosyasına hiç dokunmadan bu işi gerçekleştirmek yine CSS’le yapılacaktır.

CSS’in sağladığı avantajların başlıcaları şunlardır:

  • Güncelleme kolaylığı: Tüm bir sitenin görselleştirme bilgisi, bir veya birkaç CSS dosyasında tutulabilir. Her sayfanın görsel tarifinin kendi içinde tanımlandığı bir yapıyla kıyaslandığında bu, sitenin bakımı ve güncellemesi açısından müthiş bir avantajdır. 1000 sayfalık bir sitede başlıkları bir punto büyütmek gerektiğinde, CSS kullanan kişi tek bir dosyada tek bir satırı günceller. Görselleştirmeyi ayrı bir katman olarak ayırmamış kişi, bin sayfayı ayrı ayrı güncellemek durumundadır.
  • Veri trafiği tasarrufu: Tüm stiller birkaç tane CSS dosyasında bulunduğundan, veri trafiğinde ölçülebilir bir tasarruf sağlanır. Ayrı olarak kodlanan CSS dosyası, bir kere indirildikten sonra tarayıcı tarafından saklanır. Aynı CSS dosyasını kullanan diğer sayfalarda, saklanan bu dosya kullanılır. Aynı dosya bir daha indirilmez.
  • İçerik esnekliği: İçerik ile görsel tasarım ayrıldığında, aynı içeriği farklı farklı ortamlarda kullanmak kolaylaşır. Mesela aynı içeriği hem anasayfada, hem iç sayfada, hem RSS feed için hem de ekran okuyucular için kullanabilirsiniz.
  • Güncel kodlama stratejilerine imkan sağlama: Görsel tasarımın içerikten ayrı oluşu, artık vaz geçilmez bir strateji haline gelmiş olan responsive tasarım için zorunludur. Böylelikle her cihaz, her ekran boyu için farklı bir sayfa yapmak zorunluluğu ortadan kalkar.

Örneklerle CSS

Yaptığımız tanımı biraz somutlaştırmak için iki kod örneği verelim. Kod deyince gözünüz korkmasın. CSS’in ayrıntılarını değil, mantığını anlatacak basit örnekler kullanacağız.

Örnek 1: CSS ile logonun yerleştirilmesi

#logo {
 width: 180px;
 position: absolute;
 left: 10px;
 top: 20px;
}

Yukarıdaki satırların anlamı şudur:

  • Yüklenen sayfada, ‘logo’ isimli öğeyi bul
  • Bu öğenin enini 180 piksel yap.
  • Sayfanın sol üst tarafına, kenardan 10 piksel, yukarıdan 20 piksel mesafeye yerleştir

Örnek 2: CSS ile ikinci seviye başlıkların düzenlenmesi

h2 {
 margin-top: 24px;
 color: red;
 font-size: 24px;
}

#sidebar-left h2 {
 font-size: 18px;
}

Bu CSS bloğu da şunu söylemektedir:

  • Yüklenen sayfadaki 2. derece başlıkları bul.
  • Bulduğun öğelerin tümünün rengini kırmızı, metin boyutunu 24 piksel yap.
  • Bir istisna ile; eğer bu başlık soldaki sütundaysa metin boyutunu 18piksel yap

Özetlersek

CSS, HTML ile etiketlenmiş içeriğin nasıl görüntüleneceğini tarif eder.

CSS, görselleştirme yükünü HTML’in sırtından alır ve bu bilgiyi birkaç dosyada toplar. Böylece site güncellemelerini ve bakımını kolaylaştırır. Tüm görselleştirme bilgisinin birkaç dosyada toplanması, aynı zamanda, veri trafiğinde de tasarruf sağlar. Görselleştirme yükünü sırtından atan HTML de, asıl amacına uygun olarak yalnızca içerik hakkında bilgi taşır ve böylece daha portatif hale gelir. CSS, responsive tasarım stratejisinin belki de en vazgeçilmez ayağıdır.

CSS kolay öğrenilebilen bir dildir. Kullanımı da kolay, hatta zevklidir. CSS sayesinde ön-taraf yazılımı (front-end development), günümüzün milyon çeşit cihaz-ekran ortamında bile insanın akıl sağlığını yitirmeden yapabileceği bir iş olarak kalmıştır.

Selam olsun sana, Hakon Wium Lie!


Kaynaklar

  1. https://www.sitepoint.com/web-foundations/css/
  2. https://en.wikipedia.org/wiki/Cascading_Style_Sheets
  3. https://www.w3.org/standards/webdesign/htmlcss#whatcss
  4. http://www.w3schools.com/css/css_intro.asp
Etiketler: Web tasarım

Bunlar da ilginizi çekebilir