İlk CSS derslerimi 2011 yılında 14 bölümlük bir seri halinde hazırlamıştım.. Ancak aradan uzun bir zaman geçti ve bir çok şey gelişti, değişti.. Bu sebepten dolayı dersleri yeniden çekmeye karar verdim.. Bu ilk dersimizde ise aşağıdaki sorulara cevap bulacağız;
- CSS Nedir?
- CSS Dosyası Nasıl Oluşturulur?
- CSS Dosyası HTML Sayfasına Nasıl Çağrılır?
- HTML Sayfasında Inline CSS Nasıl Yazılır?
- CSS’in Genel Yapısı
- CSS’de Açıklama Satırı
- CSS Hataları Hakkında
CSS Nedir?
Cascading Style Sheets’in baş harflerinden oluşan CSS, stil şablonları olarak tanımlanabilir. Kısaca html sayfamızda düzeni sağlamak için kullanabileceğimiz bir teknolojidir.
CSS Dosyası Nasıl Oluşturulur?
Css dosyalarının uzantıları .css olmak zorundadır.. Adının herhangi bir önemi yoktur, önemli olan uzantısıdır.. Herhangi bir metin editörü yardımı ile kolayca bir css dosyası oluşturulabilir. Ya da elle oluşturmak isterseniz bir metin belgesi oluşturup adını style.css olarak değiştirmeniz yeterlidir.
CSS Dosyası HTML Sayfasına Nasıl Çağrılır?
Oluşturduğumuz CSS dosyalarını HTML sayfamıza çağırmanın 2 farklı yolu vardır.. 1. yol link etiketini kullanmak, 2. yol ise style etiketini kullanarak import ile çağırmaktır.
Link ile Çağırma
Head etiketleri arasında aşağıdaki gibi tanımlanır;
<link rel="stylesheet" type="text/css" href="style.css" />
href : stil dosyasının yoludur.
@import ile Çağırma
Head ya da body etikerleri arasında aşağıdaki gibi tanımlanır ve çağırılır;
<style>
@import "style.css";
@import url("style2.css");
</style>
Not: @import işleminden önce herhangi bir CSS kodu olmamalıdır aksi halde import işlemi çalışmaz.
HTML Sayfasında Inline CSS Nasıl Yazılır?
Bunun içinde ya style etiketi kullanılır ya da style niteliği kullanılır.. Genel kapsamda stil kodu yazmak için etiketi, sadece bir nesneye uygulamak için ise niteliği kullanabiliriz.
<style type="text/css">
h1 { color: red }
</style>
ya da ..
<h1 style="color: blue"> erbilen.net </h1>
CSS’de Açıklama Satırı
Ve tabi ki CSS’te de açıklama satırı mevcuttur ???? Tarayıcı bunu dikkate almaz, sadece sizin için bir önemi vardır.. Ve aşağıdaki şekilde tanımlanır;
/* bu bir açıklama satırıdır http://www.erbilen.net */