Bir tarayıcı bir stil sayfasını okuduğunda, HTML belgesini stil sayfasındaki bilgilere göre biçimlendirir.
CSS Eklemenin Üç Yolu
Stil sayfası eklemenin üç yolu vardır:
- Harici CSS
- Dahili CSS
- Satır içi CSS
Harici CSS
Harici bir stil sayfasıyla, tek bir dosyayı değiştirerek tüm web sitesinin görünümünü değiştirebilirsiniz!
Her HTML sayfası, head bölümünün içindeki <link> öğesinin içindeki harici stil sayfası dosyasına bir referans içermelidir.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Başlık</h1>
<p>İçerik.</p>
</body>
</html>Harici bir stil sayfası herhangi bir metin düzenleyicide yazılabilir ve .css uzantısıyla kaydedilmelidir.
Harici .css dosyası herhangi bir HTML etiketi içermemelidir.
Yaptığımız örnekteki “style.css” dosyası şu şekilde görünür:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}Dahili CSS
Tek bir HTML sayfasının benzersiz bir stili varsa, dahili bir stil sayfası kullanılabilir.
Dahili stil, başlık bölümünün içindeki <style> öğesinin içinde tanımlanır.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>Başlık</h1>
<p>Paragraf.</p>
</body>
</html>
Satır İçi CSS
Tek bir öğeye benzersiz bir stil uygulamak için satır içi stil kullanılabilir.
Satır içi stilleri kullanmak için stil özelliğini ilgili etikete eklenir. Stil niteliği herhangi bir CSS özelliğini içerebilir.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">Başlık</h1>
<p style="color:red;">Paragraf.</p>
</body>
</html>
Çoklu Stil Sayfaları
Farklı stil sayfalarında aynı etiket için bazı özellikler tanımlanmışsa, son okunan stil sayfasındaki değer kullanılacaktır.
Harici bir stil sayfasının <h1> öğesi için aşağıdaki stile sahip olduğunu varsayalım:
h1 {
color: navy;
}Daha sonra dahili stil sayfasının <h1> öğesi için aşağıdaki stile sahip olduğunu varsayalım:
h1 {
color: orange;
}Dahili stil, harici stil sayfasına bağlantıdan sonra tanımlanırsa, <h1> öğeleri “turuncu” olacaktır:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
h1 {
color: orange;
}
</style>
</head>Basamaklı Stil Yapısı
Bir HTML öğesi için birden fazla stil belirtildiğinde hangi stil kullanılacak? Bir sayfadaki tüm stiller, aşağıdaki kurallara göre yeni bir “sanal” stil sayfasına “basamaklı” olacaktır; burada bir numara en yüksek önceliğe sahiptir:
- Satır içi stil (bir HTML öğesinin içinde)
- Harici ve dahili stil sayfaları (baş kısmında)
- Tarayıcı varsayılanı
Bu nedenle, satır içi stil en yüksek önceliğe sahiptir ve harici ve dahili stiller ile tarayıcı varsayılanlarını geçersiz kılar.
