Dijital dünya içerisinde pek çok alan ve bununla beraber birçok farklı kavram karşımıza çıkmaktadır. Özellikle web programlama ve tasarlama konusuna ilgi gösteren kişilerin sıklıkla karşılaştığı CSS de bunlardan birisidir. CSS yani Cascading Style Sheets, en basit tanımı ile basamaklı stil şablonları veya biçimlendirme sayfası olarak açıklanmaktadır.
Web sayfalarının kodlanmasında kullanılan önemli teknolojilerden biri olan CSS, HTML’in tamamlayıcısı olarak öne çıkmaktadır. Bir web sayfanın nasıl görüneceği, biçim ve düzenleme noktalarındaki standartları CSS ile sağlanmaktadır. Bu açıdan en kısa ve basit haliyle CSS, web tasarımının bir parçası olan ve sayfaların görünümü noktasında bir dil oluşturan web teknolojisi olarak nitelendirilmektedir.
CSS Nerelerde Kullanılır?
CSS, internet sayfası kodlamasında kullanılan HTML ile yazılmış verileri biçimlendirmek ve düzenlemek için kullanılmaktadır. Bu noktada sayfaların görselliği ve sahip olduğu görünümleri CSS ile belirlenmektedir. CSS kullanarak;
- Metin rengi,
- Yazı tipi,
- Arka plan renk ve kullanımları,
- Sayfa yerleşimi,
- Video, resim gibi araçların görsel özellikleri belirlenmektedir.
Tüm bu detaylar için kullanılan CSS, web sayfanızın web tarayıcıdan başka bir platformda nasıl görüntüleneceği konusunda da kullanılmaktadır. Özellikle baskı tasarımı noktasındaki kâğıtta, farklı cihaz veya ekranlarda sayfanın nasıl bir görünüm oluşturacağı CSS ile belirlenmektedir. Bu açıdan CSS kullanımı en genel haliyle web sitelerinde biçimlendirme konusunda sıklıkla tercih edilmektedir.
CSS Tarihçesi
Web dünyasında önemli bir noktada bulunan CSS, teknolojinin hızla gelişmesi ile hayatlarımıza girmiştir. 1997 yılında W3C tarafından geliştirilen CSS, 2000li yıllarda yükselişe geçmiş, pek çok tarayıcı tarafından desteklenmeye başlamıştır. Oluşturulduğu ilk tarihten itibaren hızla geliştirilen bu kod, günümüzdeki yapısı ile web teknolojileri için vazgeçilmezler standartlar arasına girmeyi başarmıştır. CSS1, CSS2, CSS2.1 ve CSS3 olmak üzere farklı versiyonlarla gelişen CSS, günümüz için son teknoloji ile en yüksek standartlardaki yapısına ulaşmıştır.
CSS Özellikleri ve HTML İlişkisi
Web site tasarımı denildiğinde ana ve yardımcı birçok bileşen devreye girmektedir. Bu bileşenlerden en önemli ikisi ise HTML ve CSS’dir. Temel olarak ayrılmaz ikili olan bu bileşenlerden, HTML ana bileşen konumundayken, CSS daha çok düzen ve stil konusundaki yardımcı bileşen rolündedir. Yapısal olarak her iki bileşen de web sayfasının potansiyel başarı göstermesinde en önemli kilit noktaları oluşturmaktadır. Bu noktada içerik kısmını oluşturan HTML, sayfanın ziyaretçiye aktarmak istediği bilgi bölümünü oluşturmaktadır. CSS ise HTML bileşeninden sonra kullanılan, içeriğin görsel ve biçimlendirme kısmını oluşturmaktadır. Teknik olarak içeriklerin düzen-biçim-konum gibi görselleştirme işlemleri CSS dili kullanılarak belirlenmektedir.
CSS Kullanım Biçimleri
CSS’İN HTML sayfalarıyla birlikte kullanıldığını sizlerle paylaştık. Bununla birlikte CSS kullanımından en yüksek performansı ve verimi elde edebilmek için farklı kullanım biçimleri bulunmaktadır. Teknik olarak karşımıza çıkan HTML bir sayfaya CSS kodunu eklemenin 3 farklı yolu vardır. Bunlar:
- Harici (external) CSS
- Dahili (Internal) CSS
- Satır içi (inline) CSS şeklindedir.
Kullanım şekillere göre 3’e ayrılan CSS kodları, başarılı sonuçlar elde edebilmesi açısından profesyonel ve dikkatli şekilde, işinde uzman kişiler tarafından yapılmalıdır. Bu noktada oluşturulan farklı kullanımların büyük ölçüde performans ve verim yükselmesi sağlaması olası hale gelmektedir.
Neden CSS Kullanılmalıdır?
Bir önceki başlığımızda kısaca CSS-HTML ilişkisini sizlere açıklamaya çalıştık. Bu bilgilere ek olarak “Neden CSS kullanılmalıdır?” sorusunun cevapları şu şekilde sıralanmaktadır:
- İlk olarak bilinmelidir ki bir web sayfası oluşturulmasında HTML ve CSS birbirinden farklı çalışan iki katmanı ifade etmektedir.
- Bu noktada HTML, web sayfasının temel içeriğindeki detaylarla ilgili olan ve bir hiyerarşi oluşturmayı hedefleyen katmandır. Konumuz olan CSS ise verilerin görsel kısmının üzerinde çalışıldığı katmanı ifade etmektedir.
- CSS; sayfada belirlenen içeriklerin, renklerini, yazı stillerini, büyüklüklerini ve konumlarını belirlemektir. Daha sade şekliyle sayfanın estetik ve tasarım kısmı CSS kodları ile oluşmaktadır.
- Bu açıdan CSS, neyin nasıl görüneceği, nerede olacağı ve farklı medyalarda nasıl bir görsel oluşturacağıyla ilgilenmektedir.
CSS Avantajları Nelerdir?
Pek çok detayla birlikte temel bilgilerini paylaştığımız CSS teknolojisi, web tasarımı ve dijital dünya içerisinde önemli bir yerde bulunmaktadır. Web sayfa kullanıcıları ve web tasarımı için büyük bir kolaylık sunan bu teknoloji, sağladığı pek çok avantajla da öne çıkmaktadır. CSS’in avantajları ve sağladığı kolaylıklar şu şekildedir:
- Hızlı ve kolay kullanımı ile işlevsel tasarım imkânı,
- Geniş tasarım yelpazesiyle birlikte eşsiz ve farklı görselliğin elde edilebilmesi,
- Web tasarımı için sunduğu çeşitli bileşenlerle birlikte ideal yapıya sahip olması,
- Oluşturulan CSS katmanı sayesinde, görselleştirme noktasında web sitesine güncelleme ve yenilenebilme kolaylığı sağlaması,
- Veri trafiğinde büyük ölçüde tasarruf sağlaması,
- Farklı kullanım şekilleriyle performans optimizasyonu sağlaması,
- Duyarlı, özgür, esnek ve dinamik bir tasarım ortamı oluşturmasıyla, farklı tüm cihaz ve ekranlarda aynı görsel sonucun elde edilmesi ve kodlama stratejilerine uyum sağlaması, başlıca öne çıkan etkenlerdir.
CSS Nasıl Öğrenilir?
Modern çağın bir getirisi olarak web tasarımı ve geliştirme, her alanda önemini kanıtlamaktadır. Bu noktada oldukça kolay ve çabuk kavranabilir yapısıyla CSS, ilgi duyan herkes tarafından öğrenilebilmektedir. Buradaki önemli nokta ise, CSS, HTML gibi web sayfaların önemli yapı taşlarını oluşturan katmanların, profesyonelce oluşturulmasıdır. Bunun sebebi ise, bu katmanların web sitesinin elde edeceği başarı ve ulaşacağı kitleyi doğrudan etkilemesidir. Genellikle web tasarımcısı ve geliştiricisi kişiler tarafından tüm bu bileşenler, başarılı ve doğru şekilde en etkin haliyle kullanılmaktadır. Bu açıdan her ne kadar kolay gibi gözükse de CSS, işinde uzman, deneyimli ve yeterli düzeyde eğitimle yetkinlik kazanmış kişiler tarafından uygulanmalıdır.
Örnek CSS Kodu
Web sayfalarını çekici hale getiren CSS kodları, web sayfalarının tasarımını ve sunum dilini oluşturduğunu sizlerle paylaştık. Büyük ekran, küçük ekran veya yazıcı gibi çeşitli cihaz türlerinde web sayfasının uyumu bu sayede sağlanmaktadır. Bu açıdan oldukça önemli olan CSS kodları, yapıları ve işleyişleri ile merak edilmektedir. Örnek olarak en basit haliyle bu durumu özetlemek gerekirse CSS kodu şöyledir:
div{
width:250px;
height:200px;
font-size: 14px;
}
Sunduğumuz örnek CSS kodu, ilk satırdaki komut ile div nesnelerinin hepsini seçmektedir. Seçtiği tüm nesnelerin yüksekliğini 250px, genişliğini 200px ve karakter-yazı boyutunu ise 14px olarak ayarlamaktadır. Kısaca kodun seçeceği nesneler belirlendikten sonra biçimlendirilmek istenen özelliklere parantezin içerisinde yer verilmektedir. En temel yapısı ile CSS kodları bu şekilde çalışmaktadır.
Sonuç
Sonuç olarak CSS, görselleştirme alanında kullanılan ve web sayfaların profesyonelce estetik ve kullanışlı hale getirilmesini sağlayan teknolojidir. HTML ile etiketlenmiş içerikler üzerinde oluşturulan CSS, HTML’in yükünü hafifleterek tasarım stratejilerinin oluşturulmasını sağlamaktadır. Bu noktada farklı kullanımı ile sayfaların farklı ekranlardaki görünümünü standartlaştırarak, oldukça önemli bir kolaylık sunmaktadır. Böylesine gelişmiş ve çeşitli seçeneklerle kullanım şansı tanıyan CSS, günümüz işleyişi içerisinde ise web tasarımı ve web sayfaları için vazgeçilmez noktalardan birisidir.
