CSS (Cascading Style Sheets), harika görünen web sayfaları oluşturmanıza olanak tanır, ancak kaputun altında nasıl çalışır? Bu makale, CSS’nin ne olduğunu basit bir sözdizimi örneğiyle açıklar ve ayrıca dille ilgili bazı önemli terimleri kapsar.

CSS, bir web sayfasının görünümünü ve sitenin işleyişinin bir kısmında sorumludur. CSS’yi kullanarak, metnin rengini, yazı tiplerinin stilini, paragraflar arasındaki boşluğu, sütunların nasıl boyutlandırıldığını ve düzenlendiğini, hangi arka plan resimlerinin veya renklerinin kullanıldığını, düzen tasarımlarını ve farklı cihazlar ve ekranlar için görüntüleme varyasyonlarını kontrol edebilirsiniz.

CSS, web uygulamaları için kullanıcı arabirimleri ve birçok mobil uygulama için kullanıcı arabirimleri oluşturmak için çoğu web sitesinde HTML ve JavaScript ile birlikte kullanılır.

CSS Nasıl Çalışır? Sözdizimi Nasıldır?

CSS 3, sözdizimi kullanarak HTML öğeleriyle etkileşim kurarak web sayfalarınıza stil getirir. Öğeler, bir web sayfasının bağımsız HTML bileşenleridir – örneğin bir paragraf – HTML’de şöyle görünebilir:

<p>Paragaf!</p>

Bir web tarayıcısı aracılığıyla web sayfanızı görüntüleyen kişilere bu paragrafın pembe ve koyu görünmesini istiyorsanız, şuna benzeyen CSS kodunu kullanırsınız:

p  {  color:pink;  font-weight:bold;  }

Bu durumda, “p”- paragraf “selector(seçici)” olarak adlandırılır – bu, CSS stilinin hangi HTML öğesini etkileyeceğini belirten Basamaklı Stil Sayfaları kodunun bir parçasıdır. CSS’de seçici, ilk küme parantezinin soluna yazılır. Kıvrımlı parantezler arasındaki bilgilere declaration (bildirim) denir ve seçiciye uygulanan özellikleri ve değerleri içerir.

Özellikler yazı tipi boyutu, renk ve kenar boşlukları gibi şeylerdir, değerler ise bu özelliklerin ayarlarıdır ve seçiciye değişiklikler uygulayarak bunları değiştirebilirsiniz. Örneğin, “arka plan konumu”, “kenarlık rengi”, “kenarlık stili”, “kenarlık genişliği” ve “metin hizalaması” özelliklerdir ve “üst”, “kırmızı”, “noktalı”, ” kalın” ve “sol” sırasıyla değerlerdir.

Pratik bir örnek için, yukarıdaki örnekte “color” ve ” font-weight” özelliklerdir ve “pink” ve “bold” ise değerlerdir.

Neden CSS Kullanmalıyız?

1) Büyük bir dizayn sorunu çözer

CSS’den önce yazı tipi, renk, arka plan stili, eleman hizalamaları, kenarlık ve boyut gibi etiketlerin her web sayfasında tekrarlanması gerekiyordu. Bu çok uzun bir süreçti. Örneğin: Her sayfada yazı tipi ve renk bilgisinin eklendiği büyük bir web sitesi geliştiriyorsanız, bu uzun ve pahalı bir süreç olacaktır. CSS bu sorunu çözmek için oluşturuldu.

2) Geliştiriciye zaman kazandırır

CSS stil tanımları harici CSS dosyalarına kaydedilir, böylece sadece bir dosyayı değiştirerek tüm web sitesini değiştirmek mümkündür.

3) Daha fazla tasarım

CSS, web sitesinin görünümünü ve verdiği hissi tanımlamak için düz HTML’den daha ayrıntılı nitelikler sağlar.

CSS’nin Avantajları

zaman kazandırması − CSS’yi bir kez yazabilir ve ardından aynı sayfayı birden çok HTML sayfasında yeniden kullanabilirsiniz. Her HTML öğesi için bir stil tanımlayabilir ve bunu istediğiniz kadar Web sayfasına uygulayabilirsiniz.

Sayfaların daha hızlı yüklenmesi − CSS kullanıyorsanız, her seferinde HTML etiketi nitelikleri yazmanız gerekmez. Sadece bir etiketin bir CSS kuralını yazın ve bunu o etiketin tüm oluşumlarına uygulayın. Yani daha az kod, daha hızlı indirme süreleri anlamına gelir.

Kolay bakımı − Genel bir değişiklik yapmak için, stili değiştirmeniz yeterlidir ve tüm web sayfalarındaki tüm öğeler otomatik olarak güncellenecektir.

HTML’ye göre üstün stiller − CSS, HTML’den çok daha geniş bir öznitelik dizisine sahiptir, bu nedenle HTML sayfanıza HTML özniteliklerine kıyasla çok daha iyi bir görünüm verebilirsiniz.

Çoklu Cihaz Uyumluluğu − Stil sayfaları, içeriğin birden fazla cihaz türü için optimize edilmesini sağlar. Aynı HTML belgesini kullanarak, PDA’lar ve cep telefonları gibi elde taşınan cihazlar için veya yazdırma için bir web sitesinin farklı sürümleri sunulabilir.

Global web standartları − Artık HTML özellikleri kullanımdan kaldırılıyor ve CSS kullanılması tavsiye ediliyor. Bu nedenle, gelecekteki tarayıcılarla uyumlu hale getirmek için tüm HTML sayfalarında CSS kullanmaya başlamak iyi bir fikirdir.

En Çok Kullanılan CSS Frameworkleri 

• Bootstrap: En tanınmış ve yaygın olarak kullanılan CSS framework’lerden biridir. Dökümantasyonu kapsamlıdır ve hızlı bir şekilde duyarlı ve modern web siteleri oluşturmanıza olanak tanır.
• Tailwind CSS: Son zamanlarda popülerlik kazanan bir framework’dür. Utility-first yaklaşımıyla çalışır ve özelleştirilebilir bileşenlere olanak sağlar.
• Materialize CSS: Google’ın Material Design kurallarına dayanan bir framework. Renk paletleri, gölgeler ve animasyonlar gibi ögeleri içerir.
• Bulma: Kolay kullanılabilir bir CSS framework’üdür. Basit ve temiz tasarımlar oluşturmanıza yardımcı olur.
• Foundation: Esnek ve özelleştirilebilir bir CSS framework’üdür. Mobil odaklı tasarımlar için güçlü araçlar sunar.
• Semantic UI: İsimlendirmeler ve yapılar aracılığıyla anlamlı bir şekilde tasarım yapmanıza olanak sağlar.
• UIKit: Modüler bir CSS framework’üdür ve UI bileşenleri oluşturmanıza yardımcı olur.
• Pure CSS: Yalın ve hafif bir framework’tür. Minimal tasarımlar oluşturmak isteyenler için uygundur.