Bir tarayıcı bir stil sayfasını okuduğunda, HTML belgesini stil sayfasındaki bilgilere göre formatlayacaktır. Peki css dosyası nasıl eklenir?
CSS Eklemenin Üç Yolu
Bir stil sayfası eklemenin üç yolu vardır:
- Harici CSS
- Dahili CSS
- Satır içi CSS
Harici CSS
Harici bir stil sayfasıyla, yalnızca bir dosyayı değiştirerek tüm bir web sitesinin görünümünü değiştirebilirsiniz!
Her HTML sayfası, head bölümünün içindeki <link> öğesinin içinde harici stil sayfası dosyasına bir referans içermelidir.
Örnek:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Bu bir başlıktır</h1>
<p>Bu bir paragraftır</p>
</body>
</html>Harici bir stil sayfası herhangi bir metin düzenleyicide yazılabilir ve bir .css uzantısıyla kaydedilmelidir.
Harici .css dosyası herhangi bir HTML etiketi içermemelidir.
“style.css” dosyası şu şekildedir:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}Not: Özellik değeri ile birim arasına (margin-left: 20 px;) boşluk eklemeyin . Doğru yol şudur: (margin-left: 20px;)
Dahili CSS
Tek bir HTML sayfasının benzersiz bir stili varsa dahili bir stil sayfası kullanılabilir.
Dahili stil, head bölümünün içindeki <style> öğesinin içinde tanımlanır.
Örnek:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>Bu bir başlıktır</h1>
<p>Bu bir paragraftır</p>
</body>
</html>Satır içi CSS
Satır içi stil, tek bir öğeye benzersiz bir stil uygulamak için kullanılabilir.
Satır içi stilleri kullanmak için ilgili öğeye style niteliğini ekleyin. Style niteliği herhangi bir CSS özelliğini içerebilir.
Örnek:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>Çoklu Stil Sayfaları
Aynı seçici (eleman) için farklı stil sayfalarında 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;
}Ardından, bir 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” olur:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>Bununla birlikte, dahili stil harici stil sayfasına bağlantıdan önce tanımlanmışsa , <h1> öğeleri “lacivert” olacaktır:
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>Öncelikli Sıra
Bir HTML öğesi için birden fazla stil belirtildiğinde hangi stil kullanılacaktır?
- Satır içi stil (bir HTML öğesinin içinde)
- Dış ve iç stil sayfaları (head bölümünde)
- Tarayıcı varsayılanı
Bu nedenle, satır içi stil en yüksek önceliğe sahiptir ve harici ve dahili stilleri ve tarayıcı varsayılanlarını geçersiz kılar.
