CSS Nedir? CSS Ne İşe Yarar?
“Cascading Style Sheets” açılımlı CSS, “Basamaklı Biçim Sayfaları” veya “Basamaklı Stil Şablonları” anlamlarına geliyor. CSS’nin en kolay tanımı, HTML etiketlerinin görsel bakımdan (font, boyut ve renk gibi) geliştirilmesidir.
CSS’nin ismi basamaklı yapısından geliyor. CSS dosyaları; web sitelerinin sayfalarını biçimlendirir ve stil kurallarını belirletir. Aynı zamanda web sitelerini görsellik bakımından şekillendirmek içinde ortaya çıktığını söyleyebiliriz. Özetle; CSS, kendine özgü kurallardan oluşan tanım dili olarak dikkat çekiyor. Web sitesi yapımında kişinin karşısına ilk çıkan kavramın CSS olduğunu söyleyebiliriz. CSS ile HTML bir arada çalışırlar. Web sitenizde yer alan bilgileri görüntüleyebilmek amacıyla CSS’i kullanarak bazı kurallar oluşmasını sağlayabilirsiniz. Web sitenizin görünüm ile ilgili özelliklerini değiştirmeyi düşünüyorsanız, CSS’i mutlaka kullanmanız gerekiyor.
CSS ile Kodlama
CSS kodları, esneklik uygulayarak web sayfalarını kolayca tasarlayabiliyor. İsteğinize göre tüm ve tek sayfa üzerinden basit şekilde görsel özelliklerinizi değiştirebilirsiniz. CSS kodlarının genellikle iki çeşitten oluştuğunu söyleyebiliriz. Bunlardan birincisi; HTML kodları içinde bulunup body veya head bölümlerine dahil ediliyor. Body ve head bölümleri direkt tag alanı olarak tanımlanıyor. İkincisindeyse; harici CSS dosyaları oluşturulup HTML belgelerinin bünyesine yerleştirilir.
CSS aynı zamanda 3 çeşit kullanımdan oluşuyor. Esnek yazılım diliyle tasarlanan CSS, karşımıza stil dili olarak çıkıyor. Web sayfanızda dahili stil sayfaları, etiket biçimlendirme ve harici stil sayfaları gibi gelişmiş kodlarla çalışmalar yapabilirsiniz. Harici CSS stil sayfaları, bütün web sayfalarıyla erişim sağlayabiliyor. Bunun yanı sıra düzenleme işlerini de yapıyor. Bir tane web sayfasından ulaşım sağlayabilmek adına dahili stil eklemeleri kolaylıkla yapabilirsiniz. Ayrıca etiket biçimlendirme işlemlerini de etiketlerin içlerine ulaşım sağlamak adına kullanabilirsiniz. Bunları şöyle sıralayabiliriz:
- External-Dış
- İnternal-İç
- İnline-Satır içi
Web sitesi üzerinde stil kurallarının belirlenmesi adına mutlaka tüm 3 yönteminde ayrı şekilde kullanılması gerekiyor. Yukarıda belirttiğimiz özelliklerin hepsini aynı anda kullanmanız olanaksızdır. Özellikleri aynı anda kullanmaya başladığınızda mutlaka birbirlerini etsiz hale getirirler.
CSS ne İşe Yarar?
Genellikle CCS kodları kullanılarak biçimlendirme işlemlerinin sadece olacağı sanılır. Fakat işin özü detaylı incelendiğinde kullanım alanının çok geniş olduğu görülebilir. JavaScript, HTML ve CSS tekniklerini beraber kullandığınız takdirde üst seviyede estetik web ve görsel sayfaları tasarlayabilirsiniz. CSS kodlarını kullanarak web sayfalarındaki tüm hususları istediğiniz özellikler doğrultusunda şekillendirebilirsiniz. Aynı özelleştirebilmek adına da bu yöntemin kullanıldığını söyleyebiliriz. Sıradan olan web sayfasının özelleştirilmesi için çok gereklidir.
Web sitesi için önem arz eden CSS kodlamalarıyla şu işlemler yapılıyor:
- Geçiş efektleri
- Font boyutlandırma
- Sayfa arka planlarının görselleri ve renkleri
- Gölgelendirme
- Font renklendirme
- Kenar süsleri
- Dikey ve yatay menüler
- Animasyonlar
- Başlık stilleri
Popüler Olan CSS Kütüphaneleri
CSS Framework diye adlandırılan CSS kütüphaneleri, gelişen özellikleriyle çok dikkat çekiyor. CSS kodlamalarıyla yapmayı istediğiniz işlemleri hem fonksiyonel hem de çok kolay şekilde uygulayabilirsiniz. CSS’i bilenler ve web geliştiriciler tarafından devamlı kullanılan yöntem olarak kütüphaneler adlandırılıyor. Zaman tasarrufu açısından tutunda çok sayıda projelerinin aynı olmasını sağlayan sistem olarak da CSS Framework dikkat çekiyor. Ücretsiz ve açık kaynak kodlarıyla aynı zamanda CSS Framework’un servis edildiğini söyleyebiliriz. CSS kütüphaneleriyle beraber JavaScript’i kullanarak olağanüstü fonksiyonel ve modern sayfalar dizayn edebilirsiniz. CSS kütüphanelerine dair bilgilere aynı zamanda link üzerinde de ulaşabilirsiniz. Bahsettiğimiz CCS kütüphanelerinden en dikkat çeken ve popüler olanlarını şöyle sıralayabiliriz:
Ulkit
CSS kütüphaneleri içerisinde yer alan popüler Ulkit; web dünyasında ara yüz geliştirmede kullanılıyor. Front-end uygulamasının kullanıldığı CSS kütüphaneleri arasında Ulkit yer alıyor. Modüler ara yüzlerle hızlı şekilde web ara yüzlerinin geliştirilmesi yapılabilir.
Bootstrap
Responsive tasarımların gelişmesine olanak tanıyan sistem olduğunu söyleyebiliriz. Dizüstü bilgisayarlardan tutunda cep telefonuna kadar tüm cihazlarda profesyonel görünüme CSS kütüphaneleriyle ulaşabilirsiniz.
Bulma
CSS kütüphaneleri arasında açık kaynağa sahip olmalarıyla dikkat çekiyor. Özelleştirmeler, flexbox bağlantıları, duyarlı tasarımlar ve kolay kullanımlar açısından profesyonel anlamda büyük öneme sahiplerdir…
Foundation
Genel olarak dünyada en çok kullanımı söz konusu olan kütüphanelerin başında geliyor. Gelişen ve duyarlı web siteleri tasarımlarında önemli rol oynuyor. Aynı zamanda CSS kütüphanelerinin özelleştirilen ve esnek yapıları da mevcuttur.
CSS’nin Avantajları Nelerdir?
CSS avantajları başında, farklı boyutlara sahip cihazlara özel değişimler yapması geliyor. Bu cihazlara örnek olarak; tabletler, telefonlar vb. gösterilebilir. CSS aynı zamanda sitenizin tüm boyutlara uyumlu olmasını sağlıyor. Yazmayı düşündüğünüz CSS kodlarını mutlaka bir tane dosyada himaye ederek düzenli hale getirebilirsiniz. Böylelikle yapım aşaması olmak üzere tüm hususlarda kolaylıkla kodla beraber kod satırını bulabilirsiniz.
CSS’nin sağladığı avantajların içerisinde ayrıca esneklik, renk ve düzeninde geldiğini söyleyebiliriz. Bu hususlar çok kullanıcı çekebilmek adına önem arz ediyor. Etiketin bir tanesine ayrı ayrı stil vermekten CSS sayesinde kurtulabilirsiniz. CSS’i kullanarak tek etiket açıp tüm p etiketlerini stil haline getirebilirsiniz. CSS özetle; zamanı iyi kullanmak açısından çok önem arz ediyor. Sitenizde CSS kullanarak hem esneklik hem de tasarım hususunda büyük avantajlar sağlayabilirsiniz.
CSS Kaç Adet Stil Sayfa Türünden Oluşuyor?
CSS’nin stil sayfa çeşitlerini şöyle sıralayabiliriz:
İn-line (Satır İçi)
Bu sayfa türünde olan CSS kodları, HTML yapısının içerisinde in-line olarak yazılır.
Internal (İç)
CSS kodlarının sayfanın üzerine yani style etiketiyle yazıldığı şekildir.
External (Dış)
CSS kodlarında .css uzantısıyla dokümanların açılıp yazıldığı sonra da dokümanın link etiketleriyle HTML’nin içinde yazımı gerçekleştiği şekil olarak karşımıza çıkıyor.
CSS Nasıl Kullanılır?
Tarayıcının açılmasıyla beraber CSS’yle belirtilmiş olan stiller okunmaya başlar. Bu işlemle beraber HTML ögelerinin de şekillendiğini söyleyebiliriz. CSS kullanımıyla 3 tane sayfanıza stil ekleyebilirsiniz. CSS nasıl kullanılır hususunda daha fazla bilgiye linkten ulaşabilirsiniz.
- HTML sayfasında CSS yazımı
- Sayfa stillerinin CSS dosyaları içerisinden çağrılması
- HTML ögelerinin içinden stillerin belirlenebilmesi
HTML Sayfasında CSS yazımı
CSS nasıl kullanılır hususunda yapılacak ilk işlemler şunlardır: CSS’nin düzenlenmesi ve not defterinin açılması… Bu işlemleri gerçekleştirdikten sonra CSS kodlarını mutlaka kod yapılarına uygun şekilde yazmalısınız.
Sayfa Stillerinin CSS Dosyaları İçerisinden Çağrılması
HTML sayfasındaki head elementleri aralarına, “style” etiketi koyup stiller oluşturabilirsiniz.
HTML Ögelerinin İçinden Stillerin Belirlenebilmesi
Bazı durumlarda web kodlamaları için bir tane bile stil dosyası gerekmez. Hatta “style” etiketi olmaksızın hızlı düzenlemelere de gerek duyulabilir. İşte bu tarz durumlar için ögedeki style=”” özelliği kullanımı en doğru davranış olarak karşımıza çıkıyor.
Sitemizde yazılan; eski Windows cihazınızı Windows 10’a yükseltmek yazısına buradan ulaşabilirsiniz.