CSS harflerini okuduğunuzda aklınıza web tasarımı geliyorsa, doğru yerdesiniz. CSS, Cascading Style Sheets (Basamaklı Stil Sayfaları) ifadesinin kısaltmasıdır. Türkçede CSS, Stil Şablonu olarak tanımlanır. Web tasarımı öğrenmeyi düşünüyorsanız, karşılaşacağınız ilk kavram CSS olacaktır. CSS’yi temel olarak web sayfalarının tasarımını ve sunumunu yöneten bir dil olarak tanımlayabiliriz. CSS kodlarını kullanmak için HTML kodlarına ihtiyacınız vardır çünkü CSS, web sayfalarının içeriğini işleyen HTML ile birlikte çalışır. HTML, tasarladığınız sitenin metin biçimlendirmesi için birçok alternatif sunar. CSS programı sayesinde, tasarladığınız site içindeki her sayfa için daha geniş ve daha özgün şablonlar hazırlayabilirsiniz. Kısacası, CSS kodları ile tasarladığınız web sitesindeki HTML öğelerinin boyut, metin, renk karakteri gibi çeşitli görsel özelliklerini değiştirebilirsiniz. HTML mi CSS mi? Hangisi? Web tasarımıyla ilgileniyorsanız ve web tasarımı öğrenmek istiyorsanız, bir web sitesinin birkaç yapısal katmana sahip olduğunu bilmelisiniz. Bu katmanlar üç sınıfa ayrılır: içerik katmanı, görselleştirme katmanı ve etkileşim katmanı. HTML içerik katmanını, CSS görselleştirme katmanını, Javascript ise etkileşim katmanını oluşturur. HTML katmanı her web sayfasında bulunur. Hazırladığınız web sitesinde ziyaretçilere iletmek istediğiniz bilgileri HTML katmanını oluşturarak aktarabilirsiniz. Günümüz web sayfaları çoğunlukla metin ağırlıklı olsa da, resimler, animasyonlar ve videolar gibi farklı içerikler de kullanılmaktadır. İçerik katmanında içeriğin nasıl görüntüleneceğine dair bir bilgi bulunmaz. Görselleştirme katmanı yani CSS, içeriğin sayfayı ziyaret eden kişiye nasıl gösterileceğini belirler. Web sitesine yüklediğiniz içeriği ekran boyutuna göre ayarlamanız, yazı tipi boyutunu belirlemeniz ve renk ile boşluk gibi görsel öğeleri bu katmanda tanımlamanız gerekir. Görselleştirme katmanı için önerilen ve kullanılan programlama dili CSS’dir. Bu noktada, neden CSS kodlarını kullanmanız gerektiği netleşmektedir. Neden CSS Programını Kullanmalısınız? CSS programının HTML ile etiketlenmiş içeriğin nasıl görüntüleneceğini tanımladığını açıkladığımıza göre, şimdi neden CSS programını kullanmanız gerektiğini açıklama zamanı. HTML, içeriğin sayfada nasıl görüntüleneceğini ve yerleştirileceğini belirlemez. HTML programının işi, içeriği tanımlamak ve içeriğin sırasını belirtmektir. Başka bir deyişle, HTML’nin işi şu soruları yanıtlamaktır: Sayfanın başlığı nedir, sayfadaki bağlantılar nelerdir, alt alta sıralanan satırlar bir liste mi yoksa sıradan bir paragraf mı? Tüm bunlara rağmen HTML, logonun boyutu, sayfadaki konumu ve başlığın rengi gibi konulara müdahale etmez. İşte CSS’nin rolü burada başlar. Web sitesi tasarımında CSS kodları, neyin, nerede ve nasıl görüntüleneceği konusunda tam yetkilidir. Örneğin, logonun sayfanın sağ üst köşesine yerleştirilmesini sağlamaktan CSS sorumludur. Bir süre sonra müşteriniz logonun sol üst köşede, tüm ekranı kaplayacak şekilde görüntülenmesini istediğinde, bunu HTML koduna veya logoyu içeren dosyaya dokunmadan CSS ile yapabilirsiniz. Ayrıca CSS programı, görselleştirme bilgilerini birkaç dosyada topladığı için site güncellemelerini ve bakımını kolaylaştırır. Görselleştirme bilgileri birkaç dosyada toplandığı için veri trafiğinden tasarruf sağlar. CSS Kodlarını Kullanmanın Avantajları Responsive tasarım uygulamalarının vazgeçilmez programlarından biri olan CSS’yi kullanmanın birçok avantajı vardır. Bu avantajları sayacak olursak, ilk sıraya veri trafiği tasarrufunu koyabiliriz. CSS programının tüm stilleri sadece birkaç CSS dosyasında yer aldığı için veri trafiğinden tasarruf edilir. Üstelik bunu ölçebilirsiniz. CSS dosyasını ayrı kodladığınızda, dosyayı bir kez indirdiğinizde tarayıcı tarafından saklanır. Aynı CSS dosyasını diğer sayfalarda kullandığınızda tarayıcı tarafından saklanan bu dosyayı kullanabilirsiniz. Aynı dosyayı tekrar indirmek zorunda kalmazsınız. CSS kodlarını kullanmanın bir diğer avantajı da içerik esnekliği sağlamasıdır. İçerik ve görsel tasarımı ayırdığınızda, aynı içeriği farklı ortamlarda kullanmak daha kolay hale gelir. Örneğin, aynı içeriği ana sayfada olduğu kadar iç sayfalarda ve RSS akışı için de kullanabilirsiniz. Ayrıca aynı içeriği ekran okuyucular için de kullanabilirsiniz. Programın bir diğer avantajı ise güncelleme kolaylığıdır. Tüm sitenin görselleştirme bilgilerini bir veya birkaç CSS dosyasında tutabilirsiniz. Örneğin, 1000 sayfalık bir siteniz var. Sitenizdeki başlıkları bir punto büyütmek istediğinizde, CSS sayesinde tek bir dosyadaki tek bir satırı güncellersiniz. Ek olarak, CSS programı güncel kodlama stratejilerine olanak tanır. CSS Stilleri Eklemek İçin Kaç Alternatif Var? Web sitenize CSS stilleri eklemek
için 3 alternatif vardır. İlk olarak, Genel CSS kullanabilirsiniz. HTML belgesinin bölümüne CSS kuralları ekleyerek, tüm CSS kurallarını içeren harici bir .css dosyasına bağlantı verebilirsiniz. Ayrıca, web sitenize kurallar uygulamak isterseniz yerel CSS kullanabilirsiniz. Öncelikle genel CSS kodundan bahsedelim. Genel CSS kodlarını belirttiğiniz bir sayfanın bölümüne yerleştirin. CSS kodunu belirtmek için sınıfları (class) ve kimlikleri (ID) kullanabilirsiniz, ancak genel CSS yalnızca eklendiği belirli sayfada aktif olacaktır. Bu şekilde uyguladığınız CSS stilleri sayfa her yüklendiğinde yükleneceğinden, yükleme süresi artabilir. Bunu genel CSS etiketleri arasına yerleştirmelisiniz. Web sitenize CSS programı eklemenin en uygun yolu, web sitenizi harici bir .css dosyasına bağlamaktır. Bu şekilde, web sitenize bağladığınız harici CSS dosyasında yaptığınız tüm değişiklikler web sitenize küresel olarak yansıtılacaktır. Harici CSS dosyasının bağlantısını sayfanın bölümüne yerleştirmelisiniz. Son seçenek olan yerel CSS programı, belirli bir HTML etiketi için kullanılır. Yerel CSS programında her HTML öğesinin ayrı ayrı biçimlendirilmesi gerektiğinden yerel CSS kullanımı önerilmez. Sadece yerel CSS kullandığınızda, web sitenizi yönetmekte zorlanabilirsiniz. Yerel CSS kullanımı, CSS dosyalarına erişiminiz olmadığında veya yalnızca tek bir öğeyi biçimlendirmeniz gerektiğinde yararlı olabilir. CSS Kodları Nelerdir? Bir yazılım programının yazılmasını sağlayan sinyallere kod denir. CSS kodları iki temel bileşenden oluşur. Bu bileşenlerden biri, öğeleri ve stilleri ayıran bir seçimdir. Diğer bileşen ise bir veya daha fazla özelliği bildirdiğimiz ifade kısmıdır. Seçim genellikle biçimlendireceğiniz HTML öğesidir. Örneğin, h1, body, p, a vb. İfade kısmı sürekli bir özellik: değer; şeklinde listelenir. Özellikler ve değerler { } işaretleri arasında listelenir. CSS kodları her zaman noktalı virgül (;) ile biter. İfadeler köşeli parantez içindedir. Örnek olarak CSS kodlarından bir örnek paylaşalım: p { color: blue; text-align: center; } CSS Programında En Sık Kullanılan Kodlar Nelerdir? Her yazılım programında olduğu gibi, CSS programında da sık kullanılan kodlar vardır. En sık kullanılan CSS kodları arasında bağlantı özellikleri, biçimlendirme, liste özellikleri, katman özellikleri, yazı tipi özellikleri, metin özellikleri, imleç özellikleri, arka plan özellikleri ve tablo özellikleri bulunur. Örneğin; tablo özelliklerini belirten CSS kodları arasında yer alan border kodu, tablonun kenarlarının şekillendirilmesini sağlar. Bağlantı özelliklerine baktığımızda, bağlantıya tıklandığında aktif kodun durumunu ifade eder. CSS programının bir web sayfasını oluşturan katmanlar arasında olduğunu belirtmiştik. CSS kodları görselleştirme katmanını oluşturduğundan, yazı tipi özellikleri ve biçimlendirme ile ilgili kodlar da CSS kodları arasındadır. Yazı tipi özellikleri ile ilgili kodlar arasında yer alan font-family, yazı tipi türünü (times roman, verdana gibi) belirler. CSS kodları HTML kodlarının içine yerleştirilir, yani yazılır. CSS kodları, anlaşılması ve öğrenilmesi kolay bir dil yapısına sahiptir. Birçok kodlama sisteminde olduğu gibi, CSS kodlamasında da İngilizce kullanılır. Bu nedenle, kod yazımına eklenecek İngilizce kelimeleri bilmek yeterlidir.
İlgili hizmet: AI Pazarlama Ajansı