CSS Nedir? En Çok Kullanılan CSS Kodları

CSS harflerini okuduğunuzda aklınıza web tasarımı geliyorsa, doğru yerdesiniz demektir. CSS yani Cascading Style Sheets anlamına geliyor. Cascading Style Sheets sözcük öbeğinin  Türkçe anlamı ise Basamaklı stil sayfaları demek. CSS Türkçe’de Stil Şablon olarak tanımlanıyor. Web tasarımı yapmayı öğrenmeyi düşünüyorsanız, karşınıza ilk olarak CSS kavramı çıkacaktır. CSS’nin tanımını yapmak istersek, temel olarak web sayfalarının tasarımı ve sunumunu yöneten bir dil olarak tanımlayabiliriz. CSS kodları kullanabilmek için HTML kodlarına ihtiyacınız var zira CSS web sayfalarının içeriğini işleyen HTML ile birlikte çalışıyor. Tasarımını yaptığınız sitenin metin biçimlendirme konusunda HTML pek çok alternatif sunar. CSS programı sayesinde tasarladığınız site bünyesindeki her sayfa için daha geniş ve özgün  şablonlar hazırlayabilirsiniz. Kısacası, CSS kodları ile tasarladığınız web sitesindeki HTML elementlerinin boyut, yazı, renk karakteri gibi çeşit görsel özelliklerini değiştirebilirsiniz. 

HTML mi  CSS mi Hangisi ? 

Web tasarımı konusuna meraklıysanız ve web tasarımı yapmayı öğrenmek istiyorsanız  bir internet sayfasının yapısal olarak birkaç tane katmanı bulunduğunu biliyor olmalısınız. Bu katmanlar içerik katmanı, görselleştirme katmanı ve etkileşim katmanı olarak 3 sınıfta incelenir.  HTML içerik katmanını, CSS görselleştirme katmanını ve Javascript ise etkileşim katmanını oluşturur. HTML katmanı her internet sayfasında mutlaka bulunur. Hazırladığınız web sitesini ziyaret edenlere aktarmak istediğiniz bilgiyi HTML katmanını oluşturarak aktarabilirsiniz.  Günümüzde internet sayfalarında metin ağırlıklı olsa da resim, animasyon, video gibi farklı içerikler de kullanılıyor. İçerik katmanında içeriğin nasıl görüntüleneceği hakkında bilgi olmaz. 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ğin ekran boyutuna göre ayarlamayı, yazı boyutunu belirlemeyi, renk, beyaz alan gibi görsel unsurları tanımlamayı bu katmanda  yapmanız gerekir. Görselleştirme katmanı için önerilen ve kullanılan programlama dili CSS’dir. İşte, tam bu noktada CSS kodlarını  neden kullanmanız gerektiği ortaya çıkıyor.  

CSS Programını Neden Kullanmalısınız? 

CSS programı HTML ile etiketlenmiş içeriğin nasıl görüntüleneceğini tarif ettiğini açıkladığımıza göre sıra CSS programını neden kullanmanız gerektiğini açıklamaya geldi. HTML, içeriğin nasıl görüntüleneceğini ve sayfaya nasıl yerleşeceğini belirlemez. HTML programının görevi, içeriği tarif etmek ve içeriğin sırasını belirmektir. Bir başka deyişle,  HTML’nin işi sayfanın başlığı nedir, sayfadaki bağlantılar hangileridir, alt alta dizili satırlar bir liste mi yoksa sıradan paragraf mı sorularının cevabını vermektir. Bütün bunlara karşın HTML, logonun boyutu, sayfada duracağı yer, başlığın rengi gibi konulara karışmaz. İşte, CSS’nin görevi burada başlıyor. Web sitesi tasarımında CSS kodları neyin, nerede, nasıl görüntüleneceği konusunda tam yetkili birimdir. Örneğin, logonun sayfanın sağ üst köşede yer alması CSS’nin sorumluluğundadır. Bir süre sonra müşteriniz logonun sol üst köşede bütün ekranı kaplayacak şekilde görüntülenmesini istediğinde bunu  HTML koduna veya logonun bulunduğu dosyaya hiç dokunmadan CSS ile yapabilirsiniz. Bunun yanı sıra 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ığından veri trafiğinde tasarruf sağlar. 

CSS Kodları Kullanımının Avantajları 

Responsive tasarım uygulamalarının vazgeçilmez programlarından biri olan CSS kullanımının pek çok avantajı da bulunuyor.  Bu avantajları sayacak olursak ilk sıraya veri trafiği tasarrufu yerleştirebiliriz. CSS programına ait tüm stiller sadece birkaç tane CSS dosyasında yer aldığından veri trafiğinde tasarruf sağlanır. Üstelik bunu ölçümleyebilirsiniz. CSS dosyasını ayrı olarak kodladığınızda dosyayı bir kere indirdikten sonra 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ı bir daha indirmek zorunda kalmazsınız.  CSS kodları  kullanmanın avantajlarından biri de içerik esnekliği sağlamasıdır. İçerik ile görsel tasarımı ayırdığınızda aynı içeriği farklı ortamlarda kullanmanız kolaylaşır.  Mesela, aynı içeriği ana sayfada kullanabildiğiniz gibi iç sayfalarda da ve RSS feed için kullanabilirsiniz. Ayrıca, ekran okuyucular için de aynı içeriği kullanabilirsiniz. Programın bir diğer avantajı ise güncelleme kolaylığı sağlamasıdır. Bütün sitenin görselleştirme bilgisini, 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 dosyada tek bir satırı güncellersiniz. Ayrıca, CSS programı  güncel kodlama stratejilerine olanak tanır. 

CSS Stillerini Eklemek İçin Kaç Alternatif  Var?

Web sitenize CSS stillerini eklemek için 3 alternatif bulunuyor. İlk olarak Genel CSS’i kullanabilirsiniz. CSS kurallarını HTML belgesinde yer alan <head> bölümüne ekleyerek bütün CSS kurallarını kapsayan harici bir .css dosyasına bağlantı verebilirsiniz. Bunun yanı sıra web sitenize kurallar uygulamak istiyorsanız yerel CSS kullanabilirsiniz. Öncelikle genel CSS kodundan bahsedelim. Genel CSS kodlarını  belirlediğiniz bir sayfanın <head>bölümüne yerleştirin. Sınıfları ve kimlikleri, CSS kodunu belirtmek için kullanabilirsiniz ama genel CSS sadece eklendiği belirli sayfada aktif olur. Bu şekilde uyguladığınız CSS stilleri, sayfa her yüklendiğinde yüklenir, böylece yükleme süresi artabilir. Genel CSS <style> </style> etiketlerinin arasına yerleştirmelisiniz.  Web sitenize CSS programı eklemenin en uygun yolu web sitenizi harici .css dosyasına bağlamaktır. Böylece, web sitenize bağladığınız harici CSS dosyasında yapacağınız değişiklikler web sitenize küresel olarak yansır. Harici CSS dosyasına bağlantıyı sayfanın <head>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 elementinin tek tek stillendirilmesi gerektiğinden yerel CSS kullanılması önerilmez. Sadece yerel CSS kullandığınızda web sitenizi yönetirken çok zorlanabilirsiniz. CSS dosyalarına erişiminiz olmadığında ya da yalnızca tek bir unsur için stil uygulamak zorunda olduğunuzda yerel CSS kullanmak faydalı olabilir.  

CSS Kodları Nedir? 

Bir yazılım programını yazımını sağlayan işaretlere kod denir. CSS kodları  iki temel bileşenden oluşur. Bu bileşenlerden birisi element ve stilleri ayıran bir seçimdir. Diğer bileşen ise bir veya daha fazla özelliği bildirdiğimiz ifade bölümüdür.  Seçim sıklıkla stilini belirleyeceğiniz HTML elementidir. Örneğin, h1, body, p, a gibi … İfade bölümü ise sürekli özellik: değer; şeklinde sıralanır. Özellik ve değerler {  } işaretleri arasında sıralanır.  CSS kodları daima noktalı virgül (;) ile sona erer. İfadeler köşeli parantez içinde bulunur. Örnek olması açısından CSS kodları arasından bir örnek paylaşalım: 

p { color: blue; text-align: center; }

CSS Programında En Sık Kullanılan Kodlar Hangileridir? 

Her yazılım programında olduğu gibi CSS programında da sıklıkla kullanılan kodlar vardır. En sık kullanılan CSS kodları arasında  link özellikleri, biçimlendirme, liste özellikleri, katman özellikleri, font özellikleri, text özellikleri, imleç özellikleri, zemin özellikleri ve tablo özellikleri bulunur. Örneğin; tablo özelliklerini belirten CSS kodları arasında bulunan border kodu tablonun kenarlarının şekillendirilmesini sağlar. Link özelliklerine göz attığımızda active kodunun linkin tıklandığı andaki durumu anlamındadır. CSS programının bir internet sayfasını meydana getiren katmanlar arasında bulunduğunu belirtmiştik. Görselleştirme katmanını CSS kodları oluşturduğuna göre font özellikleri ve biçimlendirme ile ilgili kodlar da CSS kodları arasında bulunur. Font özellikleri ile ilgili kodlar arasında yer alan fomnt-family yazı 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. Pek çok kodlama sisteminde olduğu gibi CSS kod yazımında da İngilizce kullanılır. Dolayısıyla kod yazımı içerisine eklenecek olan İngilizce kelimeleri bilmeniz yeterli olur. 

 

Bir önceki yazımıza https://smartpro.com.tr/sosyal-medya-yoneticisi-nasil-olunur/ linkinden ulaşabilirsiniz.

 

Tinkercad