CSS Kullanım Şekilleri

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.

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 parametresi

Sırasıyla bu üç seçenei 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 parametresi, 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 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>

CSS'i style Parametresi 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 parametreyi 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. Ö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)