Kısaltmanın açılımı Cascading Style Sheet olan, Türkçesi ise Basamaklı Stil Şablonu olarak bilinen CSS, genellikle web geliştirmesi yaparken HTML ögelerini görsel anlamda iyileştirmek amacıyla kullanılır. Web geliştirmesi yaparken yazılan HTML elementleri herhangi bir stillendirmeye sahip değildir. İşte bu noktada CSS devreye girer. Yıllardır HTML-CSS arasındaki ilişki bu ve buna benzer görseller ile betimlenmektedir.
İyi güzel diyorsun da birazcık da göstersen ya hani?
Bu tanımlama kısmından sonra işlemin biraz daha pratik kısmına gelecek olursak CSS’i nasıl tanımlar, kullanır, yazarız? CSS HTML taglerine ya da class, id gibi selector olarak bilinen ögelere tanımlanır. Ufak bir görsel ile gösterecek olursak;
Yukarıdaki resimde görüleceği üzere sol tarafta HTML ögelerini tanımladık. Sağ tarafta ise CSS ile HTML ögelerine görselleştirme işlemini yapan kodu yazdık. Sağ tarafı kısaca inceleyecek olursak ufak bir İngilizce bilgisi ile de ne yaptımığız konusunda ufak bir bilgi sahibi olabilirsiniz (Metni ortaya hizala, arka plan rengini turuncu, yazının rengini koyu mavi yap gibi). Bu noktada ufak bir giriş yaptıktan sonra sizler de çok basit bir şekilde CSS yazabilir duruma geldiğinizi fark etmiş olmalısınız.
Yazarım yazarım da NEREYE yazarım?
Bu soruyu duyar gibiyim. CSS dosyaları HTML ögelerine yazılırken aynı zamanda HTML dosyası tarafından biliniyor/görünüyor olmalı ki yapılan stillendirme işlemi etkisini elementler üzerinde gösterebilsin. Bu durumda CSS kodlarını HTML dosyasına 3 farklı şekilde uygularız. Haydi gelin bunlara kısaca bakalım.
- Inline CSS (Satır içi CSS)
Yazılacak olan CSS kodu HTML ögesinin içine style özelliği ile tanımlanır. Her bir CSS property-value ikilisini “;” ile ayırmak zorundayız. Aksi halde stillendirme işlemi düzgün bir şekilde çalışmayacaktır.
2. Internal CSS (Dahili CSS)
Yazılacak olan CSS kodu HTML dosyasındaki head taginin içinde style tagleri kullanılarak tanımlanır.
3. External CSS (Harici CSS)
Yazılacak olan CSS kodu HTML dosyasından farklı bir dosyada tanımlanır. Daha sonra HTML dosyasınındaki head tagleri içinde link tagini kullanarak href özelliğine dosya yolu tanımlanır ve CSS dosyası HTML dosyasına bağlanmış olur. Internal CSS tanımlamasından tek farkı dosyalama işlemidir. Onun dışında kod yapısı olarak aynıdırlar. Genellikle her developer CSS belirtimlerini external yöntemi kullanarak tanımlar. Bu da kodun okunabilirliğini arttırır.
Bu kullanımları açıkladıktan sonra şunları belirtmekte fayda var. Bu tanımlamaları HTML dosyası içindeki bir p elementine yaptığımızı varsayalım.
Örneğin external dosya içinde p elementinin rengini kırmızı yaptık. Beklediğimiz gibi element kırmızı renge bürünecektir. Peki daha sonra bu yaptığımız renk tanımlasını unutarak ya da bilerek dosyanın ilerleyen satırlarında p elementi için yeniden bir mavi renk tanımlaması yaparsak ne olur? Tahmin edersiniz ki dosyalar yukarıdan aşağıya doğru okunmaktadır ve olmasını beklediğimiz olay gerçekleşecektir. P elementi kendisine tanımlanmış en sondaki rengi alacaktır. Yani mavi olacaktır.
Bir tık daha ileriye gidelim. Diyelim ki p elementine externaldaki renk tanımlamalarını bozmadan bir de internal olarak renk tanımlaması yaptık ve renk olarak da yeşili seçtik. Hatta ve hatta daha da ileri gidip inline CSS ile de p elementine style özelliğiyle renk tanımlaması yaptık ve burada da renk olarak turuncuyu seçtik. Sizce p elementinin son rengi nedir? Turuncu cevabı verenler doğru cevabı verdiler. İyi de hani en son tanımlanan CSS kazanırdı? Belki en son tanımlanan CSS, external olarak tanımlanan CSSdir?
Bu işleme biz CSS overriding yani CSS aşırı yükleme diyoruz. CSS kodları okunurken belli başlı sıra ile okunmaktadırlar. Her kodun belli bir sırası belli bir kuralı vardır. CSS kodları okunup işlenirken ilk başta external dosyadaki CSS kodları okunur. Daha sonra internal dosyadaki CSS kodları okunur ve en son olarak inline CSS kodları okunur ve işlenir. Bu işlemlerden ötürü basamaklı(cascading) adını almıştır. Bu noktada örneğe geri dönecek olursak p elementinin rengi sırasıyla kırmızı, mavi, yeşil ve turuncu olmasını bekliyoruz. Fakat tarayıcı kodu yorumlarken önce okur yorumlar sonra da yorumladığı kodu uygular. Bu sebeple herhangi bir renk geçişi gözlemleyemeyiz.
Peki ben bu CSS ile sadece renk değiştirip stillendirme mi yaparım?
CSS ile birçok şeyi yapabiliriz. CSS3 ile gelen özellikler CSS’e çağ atlatıp eskisinden daha fazla kullanılabilirlik ve kolaylık kazandırmıştır. CSS ile sitemize animasyonlar ekleyip site içerisine hareketlilik kazandırabilir, medya queryler yazarak sitemizi dinamik hale getirip responsive(cihaz duyarlılığı) yapabiliriz.
Bu noktada CSS ile yapılan animasyonlardan birkaç tanesini örnek olarak buraya bırakabilirim.
Bir sonraki yazımızda görüşmek üzere :) 🤟
