CSS nedir?

CSS (Cascading Style Sheets), HTML ve JavaScript gibi, internet sayfalarının kodlanmasında kullanılan 3 ana teknolojiden biridir.

CSS, bir HTML sayfasının nasıl görüntüleneceğini tarif eder. Bu tarifin içinde sayfadaki başlık, metin, resim, video gibi öğelerin görsel özelliklerinin yanı sıra, sayfa yerleşimi ve bu yerleşimin farklı ekranlarda, cihazlarda,ekran, kağıt ya da diğer ortamlarda nasıl değişeceği bilgisi de bulunur.

CSS’in tarihçesi hakkında kısa bilgi

CSS ilk kez 10 Ekim 1994 tarihinde, CERN’de Tim Barners-Lee ile birlikte çalışmakta olan Hakon Wium Lie tarafından önerilmiştir. Bunun ardından W3C (Dünya Çapındaki Ağ Birliği), çeşitli forum ve eposta listelerinde yapılan birkaç farklı stil sayfası dili taslağını da göz önünde bulundurarak, 1996 yılında ilk CSS önerisini sunmuştur (CSS1).

İnternet kullanımının yaygınlaşması ve kullanım amaçlarının çeşitlenmesiyle doğan yeni ihtiyaçlar, W3C’nin 12 Mayıs 1998’de CSS2 önerisini sunmasıyla sonuçlanmıştır. Bunun hemen ardından çalışmalarına başlanan CSS3 ise, tarayıcı desteği artmış olmasına rağmen 2016’da halen geliştirilme aşamasındadır.

İnternet safasının yapısı ve CSS

Yapısal olarak incelendiğinde internet sayfaları üç katmandan oluşur. Bu katmanlar önem ve uygulama sırasına göre içerik katmanı, görselleştirme katmanı ve etkileşim katmanıdır.

İçerik katmanı (HTML)

İçerik katmanı her intenet sayfasında mutlaka vardır. Sayfa sahibinin ziyaretçiye aktarmak istediği bilgi, HTML ile etiketlenerek bu katmanı oluşturur. Günümüzde internet sayfalarının içeriği ağırlıklı olarak metin olsa da, resim, animasyon, video gibi farklı ortamlar da içerik olarak kullanılmaktadır. Bu katmanda içeriğin nasıl görüntüleneceğine dair bilgi olmaz (olmaması gerekir).

Görselleştirme katmanı (CSS)

Görselleştirme katmanı, içeriğin sayfayı ziyaret eden kişiye nasıl gösterileceğini belirler. İçeriğin ekran boyutuna göre ayarlanması, yazı boyutunun belirlenmesi, renk, beyaz alan gibi görsel öğelerin tanımlanması bu katmanda yapılır. Görselleştirme katmanı için önerilen ve yaygın olarak kullanılan dil CSS’tir.

Etkileşim katmanı (JavaScript)

Etkileşim katmanı, kullanıcı ve sayfa arasındaki etkileşim yöntemlerini ve sonuçlarını tanımlar. Genellikle JavaScript ile kodlanır. Bir sayfanın ziyaretçi ile etkileşimi, formların kontrol edilmesi gibi basit işlemlerden, masaüstü yazılımlarına benzer kapsamlı web uygulamalara kadar çeşitlilik gösterebilir.

 

css nedir

 

Neden CSS?

HTML, içeriğin nasıl görüntüleneceğini, sayfaya nasıl yerleşeceğini belirlemek için tasarlanmış bir dil değildir. HTML’nin amacı içeriği tarif etmek, içeriğin hiyerarşisini belirlemektir. Sayfanın başlığı nedir, sayfadaki bağlantılar hangileridir, alt alta dizili bu satırlar bir liste midir yoksa sıradan paragraflar mıdır? HTML’nin işi bu soruların cevaplarını vermektir. Başlık kırmızı mı olsun, logo büyük mü olsun, sol üstte mi olsun? HTML bunlara karışmaz.

CSS tam burada devreye girer. CSS’in işlevi neyin, nerede, nasıl görüntüleneceğini tarif etmektir. Mesela logonun sayfanın sol üst köşesini tamamıyla kaplayacak şekilde görüntülenmesi CSS’in sorumluluk alanındadır. Bir ay sonra logonun sağ üst köşenin tamamını kaplaması icap ettiğinde, HTML koduna veya logonun yer aldığı resim dosyasına hiç dokunmadan bu işi gerçekleştirmek yine CSS’le yapılacaktır.

CSS’in sağladığı avantajların başlıcaları şunlardır:

  • Güncelleme kolaylığı: Tüm bir sitenin görselleştirme bilgisi, bir veya birkaç CSS dosyasında tutulabilir. Her sayfanın görsel tarifinin kendi içinde tanımlandığı bir yapıyla kıyaslandığında bu, sitenin bakımı ve güncellemesi açısından müthiş bir avantajdır. 1000 sayfalık bir sitede başlıkları bir punto büyütmek gerektiğinde, CSS kullanan kişi tek bir dosyada tek bir satırı günceller. Görselleştirmeyi ayrı bir katman olarak ayırmamış kişi, bin sayfayı ayrı ayrı güncellemek durumundadır.
  • Veri trafiği tasarrufu: Tüm stiller birkaç tane CSS dosyasında bulunduğundan, veri trafiğinde ölçülebilir bir tasarruf sağlanır. Ayrı olarak kodlanan CSS dosyası, bir kere indirildikten sonra tarayıcı tarafından saklanır. Aynı CSS dosyasını kullanan diğer sayfalarda, saklanan bu dosya kullanılır. Aynı dosya bir daha indirilmez.
  • İçerik esnekliği: İçerik ile görsel tasarım ayrıldığında, aynı içeriği farklı farklı ortamlarda kullanmak kolaylaşır. Mesela aynı içeriği hem anasayfada, hem iç sayfada, hem RSS feed için hem de ekran okuyucular için kullanabilirsiniz.
  • Güncel kodlama stratejilerine imkan sağlama: Görsel tasarımın içerikten ayrı oluşu, artık vaz geçilmez bir strateji haline gelmiş olan responsive tasarım için zorunludur. Böylelikle her cihaz, her ekran boyu için farklı bir sayfa yapmak zorunluluğu ortadan kalkar.

Örneklerle CSS

Css’i hiç bilmeyen kişiler için sadece tanımlar işe yaramayabilir bunun için bir kaç css kod örneği ve resimlerle css’in ne olduğunu ve ne işe yaradığını göstericem. Kod deyince gözünüz korkmasın. CSS’in ayrıntılarını değil, mantığını anlatacak basit örnekler kullanacağız.

 

css nasıl kullanılır

h1 etiketi sitedeki en büyük başlıktır css te h1’i seçici olarak ekleyip özellik ve değerleri yazıp h1 başlıklarını özelleştirebilirsiniz.

Resimde gördüğünüz gibi h1 başlıklarının rengini kırmızı ve yazı boyutları 12px olarak yazılmıştır.

 

Örnek 1: CSS ile logonun yerleştirilmesi

Yukarıdaki satırların anlamı şudur:

  • body yani sitenin içindeki tüm yazı fontunun Arial Sans Serif olmasını istedik.
  • a link verirken tüm linklerin rengi siyah olsun istedik.
  • a:visited ise linklerin tıklanmış hali yani ziyaret edilmişse demektir tıklanan linklerin rengide mavi olsun istedik.
  • a:hover ise linkin üstüne geldiğimizde yapacağımız işlem demektir linkin üstüne gelincede renginin kırmızı olmasını istedik.

Sizde bu örneği kendi çalışmanıza ekleyerek söylediklerimin çalışmanızda gerçekleşeceğini göreceksiniz.

Örnek 2: CSS ile logoyu düzenleme

Bu CSS bloğu da şunu söylemektedir:

  • margin-top : logomuzu 10 px yukarda boşluk bırakacak şekilde ayarla.
  • width:250px logonun genişliğini 250px yap.
  • height:100px logonun yüksekliğini 100px yap.

Bu özelliklerin uygulanması için eklediğimiz logoya “logo” classını eklemeniz gerekmektedir.

Bu şekilde logoya logo class’ını eklemiş olduk ve css’te belirlediğimiz özellikler logomuza uygulanmış oldu.

.logo css’te bunun bir class olduğunu göstermektedir. Eğerki nokta yerine # kullansaydık bu class olmaktan çıkardı ve logo artık css te id olarak tanımlanmış olurdu.

Ozaman eklediğimiz logoya class değilde id=”logo” olarak yazmamız gerekiyorki css’te yazdığımız kodlar etkili olsun.

Aşağıda css’i daha iyi anlamanız açısından saatlerce araştırıp sizin için bulduğum gif ve resimler koyuyorum dikkatli bakarsanız css’i artık tam anlamıyla ne işe yaradığını öğreneceğinizi umuyorum 🙂

 

css nedir

 

css nedir

 

css

 

css nedir

 

css nedir

 

css nedir

 

css nedir

 

CSS, HTML ile etiketlenmiş içeriğin nasıl görüntüleneceğini tarif eder.

CSS, görselleştirme yükünü HTML’in sırtından alır ve bu bilgiyi birkaç dosyada toplar. Böylece site güncellemelerini ve bakımını kolaylaştırır. Tüm görselleştirme bilgisinin birkaç dosyada toplanması, aynı zamanda, veri trafiğinde de tasarruf sağlar. Görselleştirme yükünü sırtından atan HTML de, asıl amacına uygun olarak yalnızca içerik hakkında bilgi taşır ve böylece daha portatif hale gelir. CSS, responsive tasarım stratejisinin belki de en vazgeçilmez ayağıdır.

CSS kolay öğrenilebilen bir dildir. Kullanımı da kolay, hatta zevklidir. CSS sayesinde ön-taraf yazılımı (front-end development), günümüzün milyon çeşit cihaz-ekran ortamında bile insanın akıl sağlığını yitirmeden yapabileceği bir iş olarak kalmıştır.

Evet arkadaşlar css’in ne olduğunu görmüş olduk ben projelerimde klasik style.css dosya ismi yerine her projemde css dosyalarının ismini asi-style.css olarak kullanıyorum 🙂

css nedir

 

Şuan bu sitede’de kaynak kodlarını incelerseniz css dosyasının isminin asi-style.css olduğunu göreceksiniz  🙂

Neden diye sormayın bende bilmiyorum yaptığım her sitede bu şekilde kullanıyorum 🙂

 

reklam alanı

Yorum Yap

Lütfen Yorumunuzu Yazın
Lütfen adınızı yazın