CSS nedir diye sorulan bir soruya kelime açılı olarak “Cascading Style Sheets” (Türkçe karşılığı “Basamaklı Biçim Sayfaları”) denilmektedir. Genel ve bilinen kısaltması olan CSS ile telaffuz edilmektedir. CSS bir markup (işaretleme) dilidir.
CCS’ in tarihini, çeşitlerini, kullanım amacını ve faydalarını anlatmaya başlayalım.
CSS Nedir, CSS ile neler yapılır?
CSS bir web sayfasının görsel tasarımını, renk uyumunu, nesne stilleri ve efektlerini kullanmamızı sağlar. Resimler hariç siteyi oluşturan yüksek oranda tüm tasarımlar CSS kodları ile yapılmaktadır. Sitenin arka planına renk vermek, herhangi bir renkte buton yapmak, bu butonun üstüne geldiğinizde farklı rengin çıkması ya da tıkladığınız andaki rengini değiştirme veya bir sayfada o menüde aktif duruyorsanız onun bile rengini biçimlendirmenizi sağlar.
Kısacası CSS harika bir işaretleme dilidir. Karıştırmayalım ki CSS asla bir programlama dili değildir. Bu yüzden sadece belirli kodlar ile tasarım geliştirebilirsiniz. Bir proje geliştiremezsiniz. Sadece projenin bir tasarımını oluşturabilirsiniz. Daha özetle belirtmek gerekirse CSS size 2+2 sonucunu hesaplamaz. Ama PHP, Java, Asp.Net, C#, C++, Python ve benzeri yazılım dilleri ise bu hesaplamayı rahatlıkla yapabilmektedir. HTML ve CSS arasındaki farkı anlayabilmeniz için yaptığımız örneği inceleyebilirsiniz.
CSS’ in Tarihi
CSS, 1999 yılında HTML’ nin 4.01 sürümü ile karşımıza çıkmıştır. Web’ in doğum tarihi olarak anılan bu yılda kullanıcıya odaklanan çok renkli siteler ortaya çıkmıştır.
Peki, bu CSS nerede ve nasıl kullanılır?
CSS kullanımının 3 farklı aşaması vardır. Bu aşamalar CSS kodlarını web yazılım programları ile birlikte kullanma imkânı tanır.
1.Aşama İç Kullanım (internal)
Tanımı: CSS kodlarımızı HTML <head> <head/> tagının içine <style> tagı içinde kullandığımız bölümdür.
Kullanım Örneği:
<html>
<head>
<title>Sayfa</title>
<style type=”text/css”>
.ornekCerceve {
padding:10px;
border:solid 1px black;
}
</style>
</head>
<body>
<p class=”ornekCerceve”>Burası CSS ile biçimlendirilmiş örnek bir paragraftır.</p>
</body>
</html>
Uygulama Çıktısı
2.Aşama Dış Kullanım (external)
Tanımı: CSS kodlarımızı HTML <head> <head/> tagının içine <link> tagı ile çağırdığımız biçimdir. Belirli bir internet kaynağında olan (sunucuda başka klasörde veya başka bir sitenin kaynağında bulunan) bağlantı yardımı ile çağırabileceğimiz seçenektir.
Biz ilk örnekteki <style> kodları aynı şekilde yazıp Notepad++ programından “style.css” olarak kaydettik ve aşağıda sitemizdeki bir bağlantı gibi dosyamıza dahil ettik. Satır arasına kalabalık yapıp sitenin açılmasını zorlaştırmadığı için arama motorları bu yöntemi önermektedir.
Önerimiz bu yöntemin kullanılmasından yanadır.
Kullanım Örneği:
<html>
<head>
<title>Sayfa</title>
<link href=”dosya-adresi/style.css” rel=”stylesheet”>
</style>
</head>
<body>
<p class=”ornekCerceve”>Burası CSS ile biçimlendirilmiş örnek bir paragraftır.</p>
</body>
</html>
Uygulama Çıktısı
3.Aşama Satır Kullanım (in-line)
Tanımı: CSS kodlarının HTML kodlarının aralarına yazıldığı bir yöntemdir. Nadiren kullanılmaktadır. Arama motorları siteleri indekslerken her şeyin olması gerektiği gibi kriterlere bağlı kalmasını ister. Bu yüzden site performansında düşüklük ve kod çakışmaları yaşanabilir.
Size önerimiz, tercihinizi her zaman 2. aşamada bulunan dış kullanım (external) modelini kullanmanız olacaktır.
Kullanım Örneği:
<html>
<head>
<title>Sayfa</title>
</head>
<body>
<p style=”padding:10px; border: solid 1px black;” >Burası CSS ile biçimlendirilmiş örnek bir paragraftır.</p>
</body>
</html>
Uygulama Çıktısı
CSS’ in Kullanım Amacı?
CSS’in kullanımı ilk başlarda bahsettiğimiz gibi HTML 4.0 ile hayatımıza girmiş olmasıdır. CSS tasarımın bir web sayfasının tasarım temelidir. Bu yüzden günümüz teknolojisi için her web sayfası yapan kişi veya kurumlar CSS kullanmak zorundandır.
CSS’ in Faydaları Nelerdir?
- Farklı cihaz ve tarayıcılara özel değişiklik yapma imkânı verir. Bu yüzden bir web sayfası telefondan incelendiğinde farklı bir ekranda yerleşim görebiliyorken görüntülenen cihazın ekran ölçüsü arttıkça özel tanımlanmış ölçüye göre şekil alabilir. Bu yüzden tek CSS dosyasında tablet, telefon veya bilgisayar için tanımlanmış ölçülerde stilleri çalıştırır. Bu şekilde ekran ölçüleri değiştiğinde ölçü tarayıcı üzerinden algılanır ve o kod satırı çalıştırılmış olur. Biz bu işlem basamaklarına web sayfasının responsive olma özelliği diyoruz. Bir siteniz varken 3 veya 4 farklı cihaza özel şekil alabilen esnek bir tasarımınız olabiliyor. Bir zaman sonra sadece tablet kullanıcılarının görebileceği ana sayfa üzerinde bir buton gösterilebilir.
- Yazılan CSS kodları tek bir dosyada tutulabilir. Dosya kaynağı sizde olduğu sürece anlık olarak müdahale edebilme özgürlüğü tanır.
- Kodları düzenlemek için herhangi bir özel programa ihtiyaç duymazsınız. Bilgisayarınızda not defteri uygulamaları ile rahatlıkla düzenlenebilmektedir.
- Tasarım olarak renklendirme yapmayı, özel animasyonlar yapmayı sağlar. Hatta bir resme opaklık yani şeffaflık değeri bile verebilirsiniz.
Bir HTML etiketine devamlı olarak style atamanıza gerek kalmaz. CSS dosyamızda <p> tagı için yazı boyutunu 15px olarak düzenlersek sitenizdeki her <p> tagı otomatik olarak 15px’lik yazı boyutu ile yazılır.
Zamandan tasarruf diye buna denir!
Evrensel CSS kullanımı ile ilgili W3 School kaynağına bakabilirsiniz.