CSS'in Kullanımı
Bir web sayfası tarayıcıdan görüntülendiğinde kodlar yukarıdan aşağı doğru yorumlanır. Ve yorumladığı kodları sayfada son kullanıcıya gösterir. Bu yüzden CSS kodları her zaman <head> etiketine yazılmalıdır. Çünkü içeriği göstermeden önce <head> etiketi içerisindeki üst bilgileri yorumlayacak ve eğer bir CSS dosyası çağırıldığını görürse içeriği göstermeden önce onu yükleyip içerikleri stil uygulanmış şekilde gösterecektir.
CSS'i Eklemenin Yolları
HTML'de css'leri kullanmanın 3 farklı yolu var. Bunlar;
- Harici stil sayfası
- Dahili stil etiketi
- Satıriçi stil niteliği
Şimdi sırasıyla bunlar neler inceleyelim.
CSS'i Harici Stil Dosyasında Kullanmak
<head> etiketi içerisinde <link> etiketi kullanılarak bir CSS dosyası sayfaya dahil edilir. CSS dosyalarının dosya uzantısı .css'dir. Örneğin style.css dosyasını sayfaya dahil etmek istersek;
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Bu kodlarda önemli olan href niteliği, burada css dosyasının yolunu belirliyoruz.
CSS'i style Etiketi ile Kullanmak
Bir css dosyası yerine doğrudan HTML sayfamız içerisinde CSS kodlarını tanımlayabiliriz. Bunu çok önermiyorum ancak yinede nasıl yapıldığını görelim. Bunu <head> etiketi içerisinde tanımlamak zorunda değilsiniz, body içerisinde de tanımlayabilirsiniz.
<body>
...
<style>
body {
background-color: #eee;
}
</style>
...
</body>CSS'i style Niteliği ile Kullanmak
Doğrudan bir etikete HTML sayfa içerisinde CSS uygulamak isterseniz style niteliğini kullanabilirsiniz. Örnek vermek gerekirse;
<p style="background-color: yellow"> paragraf </p>Bu şekilde mevcut p etiketinin arkaplan rengini sarı yapmış olduk. Bu niteliği tüm etiketlerde kullanabiliriz.
CSS'de Çakışma Durumu
Tarayıcılar yukarıdan aşağı doğru kodları yorumladıkları için her zaman son stil tanımını geçerli kılar. Yani örneğin style.css dosyanız içinde şu kodlarınız yazılı olsun;
h1 { color: red; }
Ve siz bunu <head> etiketi içerisinde çağırmış olun.
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Ancak yine head içerisinde birde style etiketi kullanmış olsanız;
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
h1 { color: green; }
</style>
</head>Bu durumda tarayıcı son stile göre yorumlayıp h1 etiketinin rengini yeşil belirleyecektir. Ancak h1 etiketi içinde birde style niteliği ile stil verseydik;
<h1 style="color: blue">Başlık</h1>Bu durumda ise son stil değeri mavi olduğu için yazı rengi mavi olacaktır.
CSS'de !important Kullanımı
Yukarıdaki örnekte son stil değeri neyse tarayıcı onu gösterir demiştim. Ancak istisna bir durum olarak eğer !important kullanılırsa onu uygulayacaktır. Örneği <style> etiketi içinde yazdığıız değerin sonuna !important koyarsak;
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
h1 { color: green !important; }
</style>
</head>Bunun daha önemli olduğunu tarayıcıya söyledik ve artık en altta başka bir stil tanımı bile olsa onu dikkate almayacak. Tabi alttaki stil tanımında important varsa o zaman yine aynı sırada sonuncuyu dikkate alır unutmayın.
