CSS Nedir, Avantajları Nelerdir?

CSS Nedir, Avantajları Nelerdir?

CSS; web sitelerinin görselleştirilmesini sağlayan renk, ekran boyutu, yazı tipi gibi görselliğe hitap eden şekillerin kendine ait belirli kurallar çerçevesinde stilize edilmesini sağlayan bir yazılım kodlamasıdır. Ancak bu şekilde kullanıcılar için iyi bir kullanım deneyimi oluşturulur. Kullanıcılar için web sitelerini cazip hale getiren en önemli unsur görsellik diyebiliriz. Kullanıcılar kullanımı kolay ve kafa karıştırmayan, görsel olarak da göz yormayacak ve göze hitap edecek web sitelerinde gezintiyi tercih ederler.

Web sitesi sayfaları genel olarak bakıldığında önemli 3 katmandan oluşmaktadır. İçerik, görsellik ve etkileşim olarak isimlendirilir. CSS yani Cascading Style Sheets (Basamaklanmış Stil Katmanları), görsellik katmanı olarak ön plana çıkmaktadır.

Görselliğin yanı sıra kullanıcılar basit ve anlaşılır bir deneyim yaşamak ister. Göz yoran sürekli rahatsız edici reklam içeriklerinin sunulduğu renklerin karmaşık ve kötü olduğu, yazı fontunun çok küçük veya çok büyük olduğu, italik gibi okunurluğunun düşük olduğu tarzda görsel açıdan kullanıcının tercih etmeyeceği bir web sayfası deneyiminin sunulması halinde web sitesinin etkileşiminde düşüş meydana gelir.

Bu da haliyle web sitesinin tıklanma sayısında düşüş yaşanmasını ve arama motorunda üst sıradan aşağıya doğru düşme eğilimini beraberinde getirir. Kullanıcılara kaliteli bir gezinti oluşturabilmek için içerik, görsellik ve etkileşim unsurlarının bir arada ve birbirini tamamlar bir şekilde internet sitesinin oluşturulması ve kullanıcıya sunulması gerekmektedir.

Stil Sayfaları, CSS olarak tanımlanır. Web sayfalarını sunulabilir hale getirme sürecini basitleştiren  basit bir tasarım dilidir.CSS, bir web sayfasının görünüm kısmını işler.  Metnin rengini, yazı tiplerinin stilini, paragraflar arasındaki boşluğu, sütunların ayarlamak için kullanılmaktadır. Web sitesinin nasıl boyutlandırıldığını ve düzenlendiğini, hangi arka plan resimlerinin veya renklerinin kullanıldığını, ekran varyasyonlarını kontrol edilebilmektedir.

CSS Nedir?

CSS (Cascading Style Sheets); web sitelerinin görsel olarak zenginleştirilmesini sağlayan renk, yazı tipi ve görsel efektlerin belirli kurallar çerçevesinde stillendirilmesini sağlayan yazılım kodlamasıdır. Yazı tipleri, renkler ve düzen gibi stilleri HTML ve XML belgelerine uygulamak, ana kullanımıdır. Bir belgenin sunumu, bir web sitesinin veya uygulamanın tasarımını sürdürmeyi ve güncellemeyi kolaylaştıran CSS kullanılarak yapısından ve içeriğinden ayrılabilir. Ayrı bir dosyaya yazılabilir ve HTML belgesine bağlanabilir veya bir <style> etiketi kullanılarak doğrudan HTML belgesi içinde yazılabilir. Düzen, renk, yazı tipi ve fareyle üzerine gelme ve animasyon gibi efektler, CSS tarafından sunulan stil seçeneklerinden sadece birkaçıdır. Mevcut tüm web tarayıcıları desteklediğinden, web geliştirme için gerekli bir araçtır.

CSS Kullanmanın Avantajları Nelerdir?

CSS zaman kazandırır: CSS, site çapında kullanılacak bir stil sayfasından çekilecek statik kodlar sayesinde her html sayfasında uzun kod dizinlerinin oluşmasına engel olur. Site yazılırken her sayfanın stili ile ayrı ayrı ilgilenilmesi gerekmez ve site yapımı çok daha kolay olur. Tabii tercih edilirse, her sayfa için ayrı stil sayfası da belirlenebilir. CSS kullanımının bazı avantajları şunlardır:

  • Sayfalar daha hızlı yüklenir: Her sayfada ayrı ayrı kodlar olmayacağından sitenin yüklenme hızı dramatik şekilde artar. Bu sayede site içi gezinme hızı ve yüklenme hızı artar.
  • Kolay bakım: Site çapında tek bir kodun değiştirilmesi ile sitenin içerisinde tüm sayfalardaki stil kodlarını değiştirmeden bakım ve değişiklik yapılabilir. 
  • HTML’ye göre üstün stiller: CSS ile komplike tasarımlar için kodlar yazılarak tüm sayfalarda uygulanabilir.
  • Çoklu Cihaz Uyumluluğu: CSS kodları, hemen her cihazda verimli biçimde çalışır.
  • Global web standartları: Son web yazılımı teknikleri kapsamında CSS, stil kodlamasında global standart konumundadır.

CSS Nasıl Çalışır?

Bu programın nasıl çalıştığını anlamak için önce modern HTML hakkında bilgi sahibi olunması gerekmektedir. Web geliştiricileri, sayfaları “kutu modeline” göre düzenlemektedir. Web sayfası, her biri ayrı bir öğe içeren bir dizi kutudur. Bu kutular iç içe geçmiş durumdadır.

Örneğin, bir sayfanın başlığı bir kutudur ve bir başlığı oluşturan tüm öğeleri içeren birkaç küçük kutu içermektedir. Gezinme, sosyal medya düğmeleri, alışveriş sepeti düğmeleri, vb. örnekte, geliştiricinin başlığın içindeki metni mor, Arial yazı tipi ve on beş punto yüksekliğinde yaptığını varsayalım.

Basamaklı stil sayfalarının “basamaklı” kısmı burada devreye girmektedir. Başlığa uygulanan yazı tipi stilleri, başlığın içerdiği tüm öğelere kadar basamaklanmaktadır. Gezinme, bağlantılar veya harekete geçirici mesajlar gibi metin içeren öğelerin tümü Arial ve on beş puan yüksekliğinde olmaktadır.

CSS Kodları Nelerdir?

Cascading Style Sheets metin ve format biçimlendirme alanında kullanıcılara ek imkanlar sağlayan bir internet teknolojisi alanı olarak karşımıza çıkmaktadır. İnternette bulunan sayfalara şablonlar hazırlama olanağı vererek bağımsız olarak harflerin stilini, yani renk, yazı tipi, büyüklük gibi özelliklerini değiştirmek için imkanlar sunar. Bu tekniğin en önemli özelliği kullanımındaki insanlara sağladığı esneklik ve faydalarıdır.

CSS kodları sayesinde bir web sayfası içerisinde birbiriyle uyumlu birkaç renk ve birkaç yazı tipini ayrı ayrı tekrar belirtmek yerine CSS yardımıyla bir sefer de ayarlayabilmek mümkün hale gelmektedir. Pek çok CSS kodu bulunmaktadır. Tüm hepsini listelemek mümkün olmasa da en sık kullanılanları şu şekilde sıralamamız mümkündür.

En çok kullanılan kodlardan ilki display adlı koddur. Bu kod Elementin görüntülenip görüntülenmeyeceğini veya nasıl görüntüleneceğini tanımlamamızı sağlayarak bu alanda bizlere yardımcı olmaktadır. Color, elementin rengini belirlememizi sağlamaktadır. Background-Color, elementin arka plan rengini ayarlar. Font-weight ise yazı tipinin inceliğini ve kalınlığını ayarlamamıza fırsat sunar.

Font-size, yazı tipinin boyutunu belirlememize yardımcı olur. Margin de elementin diğer elementlerle arasındaki boşluğu ayarlamamıza yardımcı olur. Padding adlı kod ise elementin kendi içindeki elementlerle arasındaki boşluğu ayarlamamızı sağar.

Border metinde bulunan kenarlıkları ayarlamaktadır. Border-color adlı kod kenarlık rengini belirtmeyi sağlar. Width isimli kod elementin genişliğini ayarlamamızı sağlar. Height adlı kod elementin yüksekliğini ayarlamamızı sağlamaya yardımcı olur. Bu kodlar en çok kullanılan Css kodlarıdır.

CSS Kullanılmadan Site Yapılabilir mi?

Geçmişte birkaç sayfalık html siteler yazılırken, stil sayfaları olmadan işlem yapabilmek mümkündü. Tek bir sayfa içerisine grafik ve diğer dinamik fonksiyonları düşük olan tasarımlar yapılabiliyordu. Ancak bugün sitelerin son derece karmaşık özellikleri bulunuyor ve tasarım bakımından birçok detayı barındırmaları gerekiyor.

Bu durumda stil sayfası olmadan bir sitenin yapılabilmesi oldukça zor demek yanlış olmaz. Binlerce alt sayfası bulunan dinamik sitelerde, sadece sayfaların değil, sayfa kısımlarının dahi ayrı stil sayfaları olabiliyor. Kaldı ki, CSS kullanmadan bir site yapmak istemek için de bir nedenimiz yok. CSS, kullanımı zor olmayan bir uygulama olmasından ötürü kolayca geliştirilip kullanılabiliyor. 

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir