CSS
Cascading Style Sheets açılımına sahip CSS, Türkçe’de basamaklı stil şablonları anlamına gelir. HTML ve JavaScript ile birlikte World Wide Web’in temel yapı taşlarından biri olan CSS, web sayfalarını görsel olarak biçimlendirmeye imkan tanıyan stil dilidir.
CSS Nedir?
CSS, web sayfalarında yerleşim, renk, yazı tipi gibi görsel arayüzün şekillendirilmesini sağlayan bir stil sayfası dilidir. Günümüzde HTML’in ayrılmaz bir parçası haline gelmiş olan CSS ile web sayfasında yer alan her bir öğenin tasarım açısından şekillendirilmesinde kullanılır.
Sadece HTML ile basit seviyede web siteleri oluşturmak mümkündür. Stil dili olan CSS ise bu web sayfasını, görsel açıdan etkileyici ve kullanıcılara daha iyi bir kullanıcı deneyimi sunabilecek duruma getirilmesini sağlar.
CSS üzerine ilk fikirler ve çalışmalar 1994 yılında CERN’de Tim Berners-Lee ile çalışan Håkon Wium Lie tarafından başlatılmıştır. 1996 yılına gelindiğinde W3C (World Wide Web Consortium) tarafından CSS1 versiyonu yayınlanarak standartları belirlenmiştir. 1998 yılında CSS’in ikinci versiyonu CSS2 ve son olarak 1999 yılında halen aktif olarak kullanılan ve geliştirilmeye devam eden CSS3 versiyonu yayınlanmıştır.
CSS Kullanma Yöntemleri
Geliştirdiğiniz web sitelerinde CSS kullanmak için farklı yöntemler izleyebilirsiniz. CSS kodlarını, diğer kodlarınızdan ayrı bir yerde tutabilir veya HTML kodunun içerisinde yazabilirsiniz. Harici, dahili ve satır içi olarak adlandırılan bu yöntemlere yakından bakalım.
Harici CSS Kullanımı
CSS kodlarının yer aldığı .css uzantıları dosyaları projenizde yer alan HTML sayfalarından çağırarak kullanabilirsiniz. CSS’in harici bir dosyada yazılması en çok kabul gören kullanım şeklidir. Asıl faydası büyük çaplı web projelerinde ortaya çıkan bu kullanım, geliştiricilere daha kolay bir geliştirme ve bakım süreci sağlar. Üstelik geliştirme sürecinin de kısalmasına yol açar. Bir kez yazılan CSS kodu, farklı HTML sayfalarında çağrılabilir. Böylelikle her HTML sayfasında CSS kodu yazmaya gerek kalmaz.
Harici CSS dosyasını kullanabilmek için, kullanmak istediğiniz HTML sayfasından CSS dosyasına bağlantı kurmalısınız. Bunun için de HTML dosyasında <head> .. </head> etiketleri içerisinde şu şekilde CSS kodunun konumunu bildirmelisiniz.
<link rel=”stil dosyası” type=”text/css” href=”stil.css”>
Dahili CSS Kullanımı
Dahili CSS kullanımında, CSS kodlarınızı HTML dosyasının içerisinde ayrı bir bölümde yazarsınız. Harici kullanımla benzer bir şekilde CSS yazılır ancak söz konusu CSS kodları sadece dahil edildiği HTML dosyasında kullanılabilir olur. Bu şekilde bir kullanım için <head> .. </head> etiketleri arasında <style> .. </style> etiketleri ile CSS kodunuzu belirterek yazabilirsiniz.
<style>
h1 {font-size:32px; color:red;}
p {font-size:25px; color:green;}
</style>
Satır İçi CSS Kullanımı
HTML kodu içerisinde satır aralarında CSS kodlarına yer verebilirsiniz. Bu yöntem sadece bir HTML öğesine stil atanması gerektiğinde kullanılabilir. Geliştiricilerin hem kodu ilk yazdıklarında hem de sonraki geliştirme ve düzenleme çalışmalarında oldukça zorluk oluşturan bir kullanım biçimidir. Hem HTML hem de CSS kodunuz karmaşık hale gelir ve kodunuz üzerindeki kontrolünüz zorlaşır.
<h1 style=”font-size:32px; color:red;”> Bu bir başlıktır </h1>
<h2 style=”font-size:25px;”> Bu bir alt başlıktır. </h2>"
Ücretsiz eğitimlerimiz seni bekliyor.
Her biri alanında uzman eğitmenler tarafından hazırlanmış eğitimlerimizden sana uygun olanı keşfedip, hemen eğitime başlayabilirsin. Süre kısıtlaması olmayan eğitimlerimizi, hiç bir ücret ödemeden hemen keşfetmeye başla.
