CSS’e gerçekten hakim olmadan iyi bir ön yüz geliştirici olamayacağınızı düşünüyorum. Ama öncesinde sayfalarımıza stil verdiğimiz CSS’i kapsamlı bir şekilde tanımak gerekir. CSS nedir, CSS ile neler yapabiliriz, CSS kodlarını sayfamıza nasıl entegre edebiliriz gibi tüm sorularınıza bu yazıyla cevap vermek ve kapsamlı bir kaynak sunmak istedim. Şimdiden keyifli okumalar.
CSS Nedir?
CSS Cascading Style Sheets (Basamaklı Stil şablonları) kelimelerinin baş harflerinden oluşan bir terimdir. HTML ile beraber web sitelerinin tamamında kullanılan en yaygın kullanılan biçimlendirme dilidir.
Css ile sayfalarımız içerisinde hazır şablonlar oluşturabileceğimiz gibi, metin, arkaplan, buton, görseller videolar gibi sayfaya eklediğimiz tüm öğelere de ayrı ayrı biçimlendirmeler uygulayabiliriz.
Css yapısı gereği çok güçlü bir stillendirme dilidir. CSS’i güçlü kılan bir kaç özelliğinden bahsetmek gerekirse bunları, farklı stil dosyalarını birbirinin içerisinde çağırma, sitede kullanılan şablon renkleri (genelde iki veya üç renk olur) veya metin büyüklüğü gibi standart tanımlamaları bir kere önceden tanımlayıp daha sonra istediğimiz kadar farklı alanda kullanmamızı sağlayan değişken tanımlamaları, ön tanımlı olarak bazı fonksiyonların kullanımı gibi özelliklerdir. Bu özellikler sayesinde aynı kodların tekrar tekrar kullanımı gibi kod fazlalığının önüne geçilecek böylece dosya boyutları küçülecektir. Günümüzde sayfa hızlarının çok önemli olduğu aşikarken CSS’in bu gücü de bize avantaj sağlamaktadır.
CSS ile stil tanımlamaları yaparken her dilde olduğu gibi bir syntax (söz dizimi) yapısı vardır. Stil tanımlamalarında 3 farklı bölüm vardır. Bunları aşağıdaki görseldeki gibi seçici {özellik:değer} şeklinde tanımlanmaktadır.
Bir CSS kuralı tanımlarken seçici kısmında bir html elementini isim, kimlik (id), sınıf(class) gibi birçok özelliğini kullanabiliriz.
Özellik kısmında ise css’in izin verdiği ön tanımlı özellikler kendine has yazım biçimiyle beraber kullanılabilmektedir. Her bir özelliğin alabileceği değer ise yine önceden tanımlanmış ve izin verilmiş değerlerdir. Eğer seçicimize birden fazla özellik tanımlamak istiyorsak her bir değer sonrasına noktalı virgül (;) kullanarak tanımlama yapabiliriz.
CSS Kodlarının Sayfaya Eklenmesi
CSS ile yaptığımız biçimlendirmeleri HTML kodlarına eklememiz gerekmektedir bu ekleme işlemini ise dört farklı yöntem ile yapabiliriz.
- Harici bir CSS dosyasına referans vererek HTML sayfasına ekleme. Bu yönteme external tanımlama denir.
- Bir HTML etiketinin içerisine doğrudan style attribute’u (özelliği) ile ekleme. Bu yönteme inline tanımlama denir.
- HTML dosyasındaki head etiketleri arasına yapılacak olan style etiketiyle ekleme. Bu yönteme internal tanımlama denir. Not: Style etiketi sadece head etiketleri içerisinde tanımlanmak zorunda değildir. Ama arama motoru botları (başta google) tarafından öneriler içerisinde head etiketleri arasında olması sayfa yükleme hızı açısından tavsiye edilmektedir.
- Javascript ile HTML sayfalarına dinamik olarak veya yükleme esnasında ekleme.
CSS’in Tarihçesi
HTML hayatımıza girdikten sonra büyüdükçe ve geliştikçe kullanıcılardan gelen talepler de daha karmaşık bir hal aldı. Web sitelerinde standart ve tutarlı bir görünüme kavuşması için ilk kez 10 Ekim 1994 tarihinde Hakon Wium Lie tarafından önerilmiştir. O dönemde Tim Berners-Lee ile beraber CERN’de çalışmalar yürütmekteydiler. Aynı dönemlerde web sitelerinin biçimlendirme çalışmaları için çok sayıda farklı biçimlendirme dili de gündeme geldi. Bunun ardından W3C çeşitli forum ve e-posta listelerinde yaptığı incelemelerle (bir kaç farklı biçimlendirme dili üzerine yapılan çalışmalar) birlikte 1996 yılında ilk CSS önerisini sundu. CSS 1.0 versiyonu olarak kullanılmaya başlayan bu versiyon web siteleri için stil sağlamak amacıyla kullanılmaya başlandı.
İnternet kullanımının yaygınlaşması ve ihtiyaçların çeşitlenmesi ile beraber kaçınılmaz olarak 12 mayıs 1998 yılında yine W3C tarafından CSS 2.0 versiyonu hayata geçmiştir. Teknolojinin hızlı gelişimi bu alanda da kendisini göstermiş ve ikinci versiyondan tam 14 yıl sonra 19 haziran 2012 yılında bugün halen kullanmaya devam ettiğimiz CSS 3.0 versiyonu hayatımıza girmiştir. Hiç şüphesiz ki teknolojinin hızıyla beraber CSS 4.0’ın da gelmesi kaçınılmazdır ve önceki versiyonlarda olduğu gibi yeni versiyonda da mevcut olanın üzerine güncellemeler yapılacaktır.
CSS günümüzde tüm browserlar (tarayıcılar) tarafından desteklenmekle beraber bazı eski versiyonlarda bazı özelliklerin farklı şekilde çalışma durumları olabilmektedir (günümüzde bu yok denecek kadar aza indirgenmiş durumda). CSS tüm avantajlarıyla beraber vazgeçilmez bir stillendirme dili olarak web sayfalarında yerini uzun süre koruyacaktır.
CSS’in Faydaları
- Tamamen ücretsizdir.
- Web sitelerinin neredeyse tamamında kullanıldığı için bir web sitesinin vazgeçilmezlerindendir.
- CSS ile tüm cihazlara duyarlı (responsive) tasarımlar yapılabilir.
- İstersek tüm HTML etiketlerini tek tek istersek de toplu olarak stillendirme yapabiliriz.
- CSS ile farklı efektlere sahip animasyonlar kurgulayabiliriz.
- Öğrenmesi kolaydır.
- Ek bir programa ihtiyaç duymadan metin defteri tarzı uygulamalarda rahatlıkla oluşturulabilir.
- Tüm bilgisayarlarda olan tarayıcılar ile çalışmaktadır.
- Diğer programlama dilleri ile (java, python, php … gibi) iç içe çalışabilir.
- Bir kere tanımladığımız bir özelliği farklı sayfalarda veya sayfanın farklı yerlerinde defalarca kullanabiliriz.
- Türkçe veya Diğer dillerde kaynak bulması en kolay dillerdendir.
CSS ile Neler Yapılabilir?
- Tüm cihazlara duyarlı (responsive) tasarımlar
- Mobil uygulamalarda kullanılabilir
- Animasyon işlemleri
- Tüm elementler için konumlandırma ve özellik değiştirme
- Geçiş / Dönüşüm işlemleri
- Efektler
- Slaytlar, resim ve video galerileri
- Özel tablolar ve listeler gibi işlemler yapılabilir.
CSS ile Neler Yapılamaz?
- Zamanlanmış işlemler gibi işlemler yapılamaz.
- Sayfa yüklendikten sonra stil çağırma
- Form gönderme ve veritabanı kaydı gibi işlemler yapılamaz.
Css de dahil olmak üzere %100 öğrenme garantisi verdiğim front-end developer eğitimime buradan erişebilirsiniz. Sınırlı süreli indirim kuponu için de iletişim sayfasındaki form’u doldurarak ya da whatsapp numaramdan bana ulaşabilirsiniz.