CSS'e başlamak

19 Mayıs 2006

Cascading Style Sheets (CSS) HTML dokümanlarına stil eklemesi (örn: yazı tipi, boşluklar, renkler vd.) yapan basit bir mekanizmadır. CSS 1996’da W3C tarafından duyurulmuştur.

CSS kullanımının birçok bakımdan avantajları bulunmaktadır. Belli başlı avantajlarını sıralarsak:

Görünüm Avantajları

CSS HTML’e göre birçok stil özelliğine sahiptir. CSS’in sayfa içeriği öğelerinin sayfa görünümü öğelerinden ayrılması için geliştirildiğini düşünürsek avantajı baştan anlaşılmış olur.

Kullanım Kolaylığı

HTML’de her elmente artı özellikler eklemek için başka bir element ve özellik eklmemiz gerekiyor ve bu işlemi geniş çaplı bir sitede yaptığımızı düşünürseniz çok büyük zaman kaybı ve uğraş gerektiğini göreceksiniz. CSS ile bir kere eklenen bir sınıf sınırsız yerde kullanılabilir.

<h1>
  <font color="blue">Başlık</font>
</h1>

Bunun gibi onlarca veya yüzlerce başlığınız olduğunu düşünün, gerçekten çok zor. CSS’de aynı işlem için

h1 {
  color: blue;
}

hatta daha sonra bu elementin özelliklerinde değişiklik yapmamızda kolay olacaktır. Hatta bu işlemi sadece bu etiket için değil diğer etiketlerede uygulayabiliriz.

h1, h2 {
  color: blue;
}

Ayrıca tek bir CSS dosyası ile sitenin tamamının yönetmekte önyüz kodlayıcıları için çok büyük kolaylıktır. Sadece bir dosya da değişlik yaparak tüm sitemizi yönetebiliriz isterse yüzlerce sayfa olsun.

Tasarım Tutarlılığı

Tek CSS dosyası ile tüm sitenizi yönetebilirsiniz bu ayrıca sitenize tutarlılık kazandıracaktır. Tüm sayfalarınıza aynı stil elementlerini ve özelliklerini atayarak sayfa tutarlılığını sağlayabilirsiniz. Web sayfanızdaki ilk sayfadan son sayfaya kadar tutarlılığınızı koruyarak ziyaretçinize düzenli bir içerik sunmuş olacak ve sitenizin kendine has özelliklerini ziyaretçiye benimsetmiş olacaksınız. Sayfalar hızlı yüklenecek ve doğru olarak yüklenecektir, çünkü aynı elementleri diğer sayfalarda tekrar yüklemeyecek ve bu ziyaretçiye zaman kazandıracaktır.

Gelecek Vadediyor

HTML ile farklı platformlara(pda,cep telefonu vs.) uyum sayesinde bilgi dolaşımı kolaylaşacak, sayfalarımız arama motorları programları tarafından daha anlaşılır olacaktır. CSS, HTML teknolojisi ile tümleşik olarak çalışarak bizlere gelecek vadediyor.

Avatar Popout Efekti

Avatar Popout Efekti uygulaması Devamını oku

Kapsayıcı sorguları (container query)

29 January 2024 tarihinde yayınlandı.

Renk geçişli ve Hareketli kenar çizgileri

22 January 2024 tarihinde yayınlandı.