CSS Nedir? Cascading Style Sheets

CSS Nedir? Cascading Style Sheets​

Cascading Style Sheets (CSS) web sayfalarının görünümünü ve düzenini belirlemek için kullanılan bir tarayıcı tabanlı stil ve düzen dilidir. CSS web geliştiricilerinin HTML (Hypertext Markup Language) ile oluşturulan içeriği nasıl göstermek istediklerini tanımlamalarını sağlar.

CSS'in Tarihi:

CSS'in tarihi web geliştirmenin erken dönemlerine kadar uzanır. İlk web tarayıcıları sadece temel HTML etiketlerini anlayabiliyor ve web sayfaları oldukça basit ve düzensizdi. Bu web geliştiricilerin sayfa tasarımlarını ve görünümünü kontrol etmelerini zorlaştırdı.

• 1990'ların İlk Yarısı: Tim Berners-Lee tarafından icat edilen World Wide Web'in ilk günlerinde, web sayfalarının görünümü için stil ve düzen kontrolü yoktu. Bu dönemde web sayfaları sadece metin içeriyordu.
• 1994: Haşhaş (Mosaic) tarayıcısının popüler hale gelmesi ve tablo kullanımının artması daha karmaşık web sayfalarının oluşturulmasını mümkün kıldı. Ancak bu sayfaların görünümünü kontrol etmek hala zordu.
• 1996: CSS seviye 1 (CSS1) önerisi W3C (World Wide Web Consortium) tarafından tanıtıldı ve kabul edildi. CSS HTML ile birlikte kullanılabilecek bir stil dilini tanımladı. Bu, web geliştiricilerine daha fazla tasarım ve düzen kontrolü sağladı.
• 1998: CSS seviye 2 (CSS2) önerisi kabul edildi. CSS2, CSS1'e ek özellikler ekledi ve tarayıcıların daha fazla çeşitlilikte stil özelliği tanımasına olanak sağladı.
• 2000'ler: CSS'in kullanımı ve yaygınlığı arttı. Web geliştiricileri web sitelerini farklı tarayıcılarda daha tutarlı hale getirmek için CSS kullanmaya başladılar.
• 2010'lar: CSS3 web tasarımında daha fazla özellik ve esneklik sağladı. Animasyonlar, dönüşümler, gölgeler ve daha fazlası CSS3 ile mümkün hale geldi.

CSS Temel Kavramlar:

CSS belirli bir HTML öğesinin görünümünü tanımlamak için kullanılır. CSS'in temel kavramları:

• Stil Kuralları (Style Rules): CSS'de stil kuralları belirli bir HTML öğesini veya öğe grubunu hedefleyen talimatlardır. Her stil kuralı bir seçici (selector) ve bir grup özellik (property) ve değer (value) içerir.
• Seçiciler (Selectors): Seçiciler hangi HTML öğelerinin stil kurallarının uygulanacağını belirler. Örnek seçiciler şunlar olabilir: etiket isimleri (p, h1, a), sınıflar (.btn, .header), kimlikler (#navbar), özelleşmiş seçiciler ve daha fazlası.
  
  
• Özellikler ve Değerler (Properties and Values): Stil kuralları özellikler (property) ve bu özelliklerin değerleri (value) içerir. Özellikler bir öğenin hangi özelliğini değiştireceğinizi belirtir (örneğin, color özelliği metin rengini belirler) ve değerler, bu özelliğin ne olacağını belirtir (örneğin, blue renk değeri).
  
  
• Kaskad (Cascade): CSS, "cascading" ilkesine dayanır yani bir öğenin stilini tanımlayan birden fazla stil kuralı varsa tarayıcı bu kuralları belirli bir öncelik sırasına göre uygular. Bu öncelik sırası seçicilerin özgünlüğüne, belirtilenlik düzeyine ve daha fazla faktöre dayanır.
  
  
• Box Model: Box model HTML öğelerinin nasıl düzenlendiğini ve boyutlandırıldığını tanımlar. Bu model her öğenin içeriği, dolgu (padding), sınır (border) ve dış boşluk (margin) olmak üzere dört temel bileşenle açıklanır.

CSS Kullanım Alanları:

CSS web geliştirme süreçlerinde geniş bir kullanım alanına sahiptir:

1. Web Tasarımı: CSS web sitelerinin görsel tasarımını ve düzenini kontrol etmek için kullanılır. Renkler, yazı tipleri, düzenler ve animasyonlar gibi pek çok tasarım öğesini tanımlamak için kullanılır.
   
   
2. Döküman Düzenleme: CSS belgelerin yazdırma sırasında nasıl görüneceğini kontrol etmek için kullanılır. Bu web sayfalarını veya belgeleri yazdırırken düzeni ayarlamak için önemlidir.
   
   
3. Mobil Uyum: Responsive web tasarımın bir parçası olarak CSS farklı cihazlarda (mobil telefonlar, tabletler) web sitelerinin nasıl görüneceğini ve davranacağını kontrol etmek için kullanılır.
   
   
4. Tarayıcı Uyumluluğu: CSS farklı web tarayıcılarında (Chrome, Firefox, Safari, Internet Explorer, vb.) web sitelerinin tutarlı bir şekilde görüntülenmesini sağlamak için kullanılır.
   
   
5. Animasyon ve Geçişler: CSS3 ile birlikte web sayfalarında animasyonlar, geçişler ve hareket efektleri oluşturmak mümkün hale geldi. Bu kullanıcı deneyimini geliştirmek için kullanılır.

Sonuç Olarak CSS:

CSS modern web geliştirmenin temel taşlarından biridir ve web sitelerinin görsel tasarımını, düzenini ve davranışını kontrol etmek için kullanılır. Web geliştiricileri için vazgeçilmez bir araç olan CSS web dünyasındaki değişen ihtiyaçları ve teknolojilere uyum sağlamış ve web tasarımını daha esnek ve etkileyici hale getirmiştir.