Web tasarımı yaparken, sayfalarımızın görünümünü belirlemek için CSS (yani Cascading Style Sheets) teknolojisini kullanırız. CSS, HTML öğelerimizin stillerini değiştirmemizi sağlar. CSS kullanım şekilleri üçe ayrılıyor. Bunlar inline CSS, internal CSS ve external CSS olarak üçe ayrılır. Bu yazıda, bu üç yöntemin ne olduğunu, nasıl kullanıldığını ve aralarındaki farkları anlatacağım.
Inline (Satır İçi) CSS
CSS kullanım şekilleri denilince akla ilk gelen pratik yönrem Inline CSS’tir. Inline CSS’i HTML öğelerimizin style niteliği içinde yazarak kullanırız. Böylece yalnızca o öğeye stil uygulanır. Mesela:
<p style="color: green; font-size: 20px;">Bu paragraf yeşil ve 20 piksel boyutunda yazılmıştır.</p>Bu yöntemin avantajı, hızlı ve kolay olmasıdır. Ancak dezavantajları da vardır. Öncelikle bu yöntem sayfamızdaki çok sayıda öğeye stil uygulamak istediğimizde çok kullanışsızdır. Ayrıca bu yöntem sayfamızın bakımını ve güncellemesini zorlaştırır. Çünkü stil kodlarını HTML kodları arasında aramak ve değiştirmek gerekebilir. Son olarak bu yöntem sayfamızın boyutunu artırır ve yükleme süresini uzatır. Bu yüzden bu yöntemi yalnızca tek öğeye özel bir stil uygulamak istediğimizde kullanmalıyız.
Internal (Dahili) CSS
Bu yöntemde stil kodlarımızı HTML dosyamızın <head> bölümünde <style> etiketi içinde yazarız. Bu şekilde CSS kodlarımız yalnızca o sayfa için geçerli olur. Ancak sayfadaki birden çok öğeye stil uygulamak istersek class ve id gibi seçicileri kullanırız. Ben bu yöntemi, sayfamın çok küçük olduğu veya stil kodlarının çok az olduğu durumlarda kullanıyorum. Mesela aşağıdaki kodlar, sayfamın arka plan rengini (background-color: #f7cac9), başlık rengini (color: #5e3c58) ve metin hizalamasını (text-align: center) belirliyor:
<head>
<style>
body {
background-color: #f7cac9;
}
h1 {
color: #5e3c58;
}
p {
text-align: center;
}
</style>
</head>Bu yöntemin avantajı, stil kodlarımızı HTML kodlarımızdan ayırması ve sayfamızın bakımını ve güncellemesini kolaylaştırmasıdır. Ayrıca, bu yöntem sayfamızın yükleme süresini kısaltır çünkü tarayıcının ayrı bir dosya indirmesi gerekmez. Ancak bu yöntemin de dezavantajları vardır. Öncelikle bu yöntem birden çok sayfaya stil uygulamak istediğimizde verimsizdir çünkü her sayfada aynı stil kodlarını tekrarlamak gerekir. Ayrıca, bu yöntem sayfamızın boyutunu artırır.
External (Harici) CSS
Bu yöntemde, stil kodlarımızı ayrı bir dosyada (.css uzantılı) yazarız ve HTML dosyasından <link> etiketi ile çağırırız. Bu şekilde, CSS kodlarımız birden çok sayfa için geçerli olur ve sayfalardaki öğelere stil uygulamak için class ve id gibi seçicileri kullanabiliriz. Geliştiriciler tarafından en çok tercih edilen ve en iyi uygulamalara en uygun olan CSS kullanım şekilleri öğesi external CSS’tir. Bu yöntemin avantajı stil kodlarımızı HTML kodlarından tamamen ayırması ve web sayfamızın bakımını ve güncellemesini çok kolaylaştırmasıdır. Ayrıca, bu yöntem sayfanın boyutunu azaltır ve yükleme süresini kısaltır çünkü CSS dosyası yalnızca bir kez indirilir ve tarayıcı tarafından önbelleğe alınır. Bu yöntemin dezavantajı ise, CSS dosyasının bulunamaması veya yüklenememesi durumunda, sayfanın görünümünün bozulmasıdır .
Harici CSS dosyamızı bağlamak için önce proje klasörümüzde style.css ya da styles.css adında dosya oluşturalım. (İlla bunları kullanmanıza gerek yok, istediğiniz ismi verebilirsiniz.) Daha sonra HTML dosyamıza giderek head etiketleri arasına CSS dosyamızı bağlayacağımız link etiketini yazalım. Bunu şöyle yapıyoruz:
<link rel="stylesheet" href="styles.css" />Artık CSS dosyamız HTML dosyamıza bağlanmış olacaktır. Stil tanımlamalarımızı bu harici CSS dosyası içine yazarak sayfamızı şekillendirebiliriz. Mesela harici CSS dosyamıza şu kodları yazdığımızda:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
h1 {
color: red;
}
padding ve border değerleri toplam genişliğe dahil edilir, varsayılan boşluklar kaldırılır ve HTML belgemizdeki tüm h1 başlıkları kırmızı olur. Web sayfamızda bir değişiklik yapmak istediğimizde harici CSS dosyasından müdahalelerimizi gerçekleştiririz.
Bu yazıda elimden geldiğince basit bir şekilde CSS kullanım şekilleri konusunu anlatmaya çalıştım. Umarım faydalı olmuştur. CSS ile ilgili diğer yazılara buradan ulaşabilirsiniz. Yeni rehberlerde görüşmek dileğiyle.
