Bir web sayfası tarayıcıda 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.
HTML'de css'leri kullanmanın 3 farklı yolu var. Bunlar;
Sırasıyla bu üç seçenei inceleyelim.
<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
parametresi, burada css dosyasının yolunu belirliyoruz.
Bir css dosyası yerine doğrudan HTML sayfamız içerisinde CSS kodlarını tanımlayabiliriz. Bunu yöntemi ç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>
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 parametreyi tüm etiketlerde kullanabiliriz.
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. Ö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.
Sorular (0)