Css Nedir, Nasıl Kullanılır Ve Ne İşe Yarar?

 CSS, web tasarımında mühim bileşenlerden biridir. Web site tasarımının en mühim yapı taşlarından olan CSS hakkında informasyon sahibi olmak günümüzün teknolojisinde mühim bir farkındalık yaratmaktadır.

Peki, CSS tam olarak nedir ve ne benzer biçimde avantajlar sağlar?

CSS Nedir?

CSS (açılımı Cascading Style Sheets) “Basamaklı Yoldam Sayfaları” anlamına gelen bir web teknolojisidir. Bu web teknolojisi, tarayıcıya bir web sitesinin değişik öğelerini görüntülemek için bir yoldam elde eden tamamlayıcı bir HTML dili mekanizmasıdır.

CSS, web sayfasının ögelerinin hangi yazı tipi ile oluşturulduğu, yazı boyutu rengi yada hizalaması ile ilgilenir.

CSS içeren ve içermeyen bir web sayfası içinde oldukça büyük bir fark vardır. CSS’nin en mühim misyonunun web sayfalarını daha iyi ve daha okunaklı hale getirmek bulunduğunu ifade edebiliriz.

Dolayısıyla bu teknoloji, internet sayfasına görünüm ve seviye açısından oldukça çok katkı sağlamaktadır. Eğer CSS olmasaydı, beyaz arka plandan oluşan ve düz metinlerin yazılı olduğu platformlardan (web sitelerinden) bahsediyor olurduk.

W3C CSS Nedir?

1996'da World Wide Web Consortium (W3C) tarafınca CSS'nin geliştirilmesinden ilkin web sayfaları hem şekil hem de işlev açısından son aşama sınırlıydı. Sayfalarda seviye eksikliği göze çarpıyor ve paragraflar tek bir sütun süresince akıp gidiyordu.

Sadece CSS, web sayfası düzeninde aşağıdakiler benzer biçimde birkaç yeniliğe izin verdi:

• Tarayıcı için varsayılandan değişik yazı tipleri
• Metin ve bağlantıların rengini ve boyutunu belirtme
• Arka planlara renk uygulama
• Web sayfası öğelerini değişik biçimlerde gösterme
• Bu biçimleri sayfadaki belirli konumlara taşıma

Böylece CSS dili ile göze hoş gelen ve daha kolay okunaklı web sayfaları ve web projeleri ortaya çıktı. Özetle web deneyimlerimizi iyileştiren bir programlama dili olarak varlığını sürdürdüğünü ifade edebiliriz.

CSS Ne işe yarar?

CSS işlevleri, web sayfası tasarımı ve bütünlüğüne mükemmel katkılar sağlar. Web dizaynında standart bir estetiğin sınırlarını kaldıran Cascading Style Sheets, tasarımcılar için oldukça kapsamlı bir hareket alanı yaratmaktadır.

CSS ile metin boyutu, rengi, stili, yazı tipi, hizalama, bağlantı rengi, gölgeleme, tablo boyutu, madde işareti vb. tasarımları daha iyi hale getirmek mümkündür.

CSS ile neler yapılabilir, avantajları neler?

• Yazı efekti, yazmayı canlandırmanın ve internet sayfalarını daha şık hale getirmenin bir yolu olabilir. Bilhassa CSS typewriter effect isminde bileşende son aşama ilgi çekici tasarım ögelerinin bulunduğunu belirtelim.
• Animasyon mevzusunda oldukça verimlidir. Cubic-bezier işlevi, geliştiricilerin CSS animasyonları üstünde daha iyi denetim sağlamasına olanak tanır.
• Grid (ızgara çizgi biçimleri) muhteşem bir yaratıcılık ve tasarım aracıdır. Herhangi bir çağdaş internet sayfasına mükemmel bir görsel tesir katarlar.
• Statik bir konumu tutan öğeleri hizalamak için de son aşama kullanışlıdır.
• Pure CSS, ek HTML öğelerine yada JavaScript'e gerek kalmadan vasıta ipuçlarının oluşturulmasına izin verir. CSS (tooltips) vasıta ipuçları basitleştirme mevzusunda harikadır.
• Geliştiricilerin içeriğin görünümünü konumuna gore değiştirmelerine olanak tanır.
• Cascading Style Sheets, bazı platformlarda arka plan filtresini kullanır ve geliştiricilerin bir öğenin arkasındaki her şeyi bulanık hale getirme tesirinin oluşmasına olanak tanır.

Style CSS Nedir?

Style CSS, belgelerin kullanıcılara iyi mi sunulacağını ve iyi mi biçimlendirildiklerini belirleyen bir dildir.

Web sayfaları için seviye yapma mevzusunda etkili netice veren bu bileşen, metin stillerini ve bir sayfanın HTML'sinde tanımlı olan web sayfalarının öteki kısımlarını belirlemek amacıyla kullanılabilir. Style CSS, web geliştiricilerine web sayfalarının iyi mi görüneceği mevzusunda kati bir denetim yapma imkanı sağlar. Günümüzde bir çok web sayfasında kullanılmasının sebebi budur.

CSS Iyi mi Kullanılır?

3 değişik kullanım şekli vardır. Bunlar;

Inline / Internal / External

Inline CSS: Inline CSS için her yoldam içinde ne olduğu HTML öğelerindedir. Sınırı olan bir bölüm için kullanılır. Yalnızca tek öğeleri etkisinde bırakır. Bu CSS türü, her HTML etiketinde belirtilmelidir.

Internal CSS: Bu biçim bir CSS’de CSS'nin stili < head > etiketi içinde belirtilir. En sık kullanılan yoldam biçimidir. Bu tanımlama sayfa içindeki tüm öğeleri etkisinde bırakır. Kullanış biçimi < bağlantı rel="stylesheet" type="text/css" "bu kısma kısayol tanımı gelir" /> şeklindedir.

External CSS: Bir internet sayfasındaki stillerin oldukça sayıda sayfaya uygulanacağı süre kullanılan CSS türüdür. Web adresleri birden fazla olduğu takdirde uygulanmış olduğu sayfaların görünüm biçimlerini denetler.

HTML ve CSS İlişkisi

HTML komut dosyaları gezginlere metnin bazı bölümlerinin başlıklar, alt başlıklar, bağlantılar yada paragraflar bulunduğunu söylerken, Cascading Style Sheets ona öteki şeylerin yanı sıra bir sayfanın öğelerinin hangi yazı tipi, boyutu, rengi yada hizalamasına haiz bulunduğunu söyler.

Web sayfaları sunumunu açıklayan dil olan CSS, HTML'den bağımsızdır ve herhangi bir XML tabanlı biçimlendirme diliyle kullanılabilir. HTML, sayfanızın iskeletiyse, CSS dış görünümüdür.

HTML, işaretleyerek ham içeriğe anlam katmak içindir. CSS, içinde ne olduğu biçimlendirmek içindir. HTML'yi bir web sayfasının arkasındaki soyut metin ve resimler, CSS'yi ise gerçekte görüntülenen sayfa olarak düşünebiliriz. HTML kendi başına var olabilir, CSS olması imkansız; sadece ikisi beraber olduğunda kullanıcı odaklı ve verimli web sayfaları ortaya çıkar.

En İyi CSS Kütüphaneleri ve Avantajları

CSS kütüphaneleri, minimum zaman içinde en iyi tasarım ve düzenlemeleri halletmeye destek olan araçlardan oluşmaktadır.

Yazının devamında temiz ve sürdürülebilir projeler için ihtiyacınız olabilecek CSS kütüphanelerine özetlemek gerekirse değindik:

• Bootstrap: Doğal ki listenin ilk sırası gene Bootstrap’a ilişik. Oldukça gelişmiş yapısı, performans odaklılığı, kullanım kolaylığı, tasarım konseptinin yenilikçi ve çekici olması sebebiyle ilk sırayı fazlasıyla hak ediyor. Web tasarıma yeni bir boyut kazandıran kütüphanelerden biridir kendisi.
• Foundation: Gelişmiş çerçeveler sunan bir kütüphanedir. Dikey süre çizelgesi ve özelleştirilebilir yapısı ile dikkat çeker. Mobil uyumlu tasarımlar yapmak için de oldukça kullanışlı ve kuvvetli özelliklere haizdir.
• Hover CSS: Hareketli görüntülerin mouse vasıtasıyla gerçekleşmesi isteniyorsa tercih edilen bir kütüphanedir. Kutu ve grafiklere mouse ile gelindiğinde animasyon oluşumunu sağlar.
• Kite CSS: Daha esnek ve daha duyarlı web site şablonu için tercih edilir. Kullanıcı odaklıdır ve görselliğe katkı sağlayarak ergonomik ve kolay bir kullanım imkanı yaratır.
• Paper CSS: Bileşenlerin elle çizilmiş, karikatür benzeri bir görünümü vardır. Kullanım örnekleri çocuklar için bir internet sayfası, bir blog, bir oyun yada bir çizgi roman içerebilir. PaperCSS, bir flexbox ızgarası, rozetler, düğmeler, kartlar ve bazı etkileşimli saf CSS bileşenleri ihtiva eder.
• Magic Animations: 3 boyutlu animasyonlar yaratan bir kütüphanedir. Görselliğin daha da dikkat çekici olmasını sağlar. İkon, nesne vb. ögeleri ön plana çıkarır.
• Semantic: Atomik, görsel, davranışsal ve yararlı sınıflar semantik olmayan sınıfların tüm biçimleridir. Anlamsal sınıflar stillerini aktarmaz. CSS'de listelenen sınıfların her biri için benzersiz bir yoldam kümesi olması gerekmez. kelimelerin bağlam içinde anlamlı olduğu dile benzer şekilde, derslik adları uyumlu, mobil uyumlu bileşenler oluşturmak için beraber çalışır.
• Animate CSS: En mühim özelliği içinde barındırdığı animasyonlardır. Zevke ve ihtiyaca uygun animasyon seçenekleri ile beklentileri karşılama mevzusunda iddialıdır.

Netice

CSS teknolojisini iyi öğrenmek ve bu mevzuda akıcılık kazanmak, gerçek bir web geliştiricisi olma yolunda atılan mühim bir adımdır. Bu web teknolojisi hakkında bilgili olmak, daha başarı göstermiş ve kullanıcı dostu internet sayfaları tasarlamak anlamına gelir.