HTML dosyaların görsel olarak yapılandırılması için style tag'leri kullanılmaktadır. Bu tag içinde çok fazla tanım yapılacak ise her html dosyanın yüklenme süresi ve kapladığı alan artacaktır. Bunun yerine tüm html dosyaları için tek bir CSS hazırlanması ve html içinden çağrılarak kullanılması daha efektif olacaktır.
HTML dosyası içinde CSS kullanmak için aşağıdaki link kodu kullanılır. Link tag'i her zaman Head başlığı altına yazılır.
<link rel="stylesheet" href="style.css">
Bu kod style.css dosyası içindeki tanımlarım bu HTML dosyasına aktarılmasını sağlar. style.css dosyası bir text dosyadır ve notepad gibi uygulamalar ile hazırlanabilir.
İlk olarak bir HTML dosyası hazırlayın;
<!DOCTYPE html>
<html>
<head>
<title>Css Örneği</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>
:: <em>CSS Örnek Uygulama</em> ::
</h1>
</body>
</html>
Yukarıdaki kodlamayı bir dosyaya yazarak cssTest.html olarak kaydedin. Aynı dizine style.css isimli bir dosya daha oluşturun ve aşağıdaki içeriği bu dosyaya yazın.
body {
background-color: #e3e3e8;
}
h1 {
background-color: #ff9900;
position: fixed;
text-align: center;
}
Html dosyasını açtığınızda arka plan renginin ve h1 tag'i içinde bulunan metnin arka plan renginin css dosyasında tanımlandığı gibi olacağını göreceksiniz. Html tag'lerinin tamamı Css dosyası içinde görsel olarak şekillendirilebilir. Bilinen Html tag'leri için değilde spesifik bir değişiklik yapılacak ise class kodu kullanılır. Ör;
<div class=test>Deneme Mesajı</div>
Burada tanımlanan class'ın Css dosyası içinde özellikleri yazılır. Class'lar başına nokta konularak css dosyası içinde tanımlanırlar.
.test {
text-align: center;
color: red;
}
Bu kodlar Html dosyasına eklendiğinde "Deneme Mesajı" sayfa ortasında kırmızı renkte görüntülenir.
HTML dosyası içinde CSS kullanmak için aşağıdaki link kodu kullanılır. Link tag'i her zaman Head başlığı altına yazılır.
<link rel="stylesheet" href="style.css">
Bu kod style.css dosyası içindeki tanımlarım bu HTML dosyasına aktarılmasını sağlar. style.css dosyası bir text dosyadır ve notepad gibi uygulamalar ile hazırlanabilir.
İlk olarak bir HTML dosyası hazırlayın;
<!DOCTYPE html>
<html>
<head>
<title>Css Örneği</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>
:: <em>CSS Örnek Uygulama</em> ::
</h1>
</body>
</html>
Yukarıdaki kodlamayı bir dosyaya yazarak cssTest.html olarak kaydedin. Aynı dizine style.css isimli bir dosya daha oluşturun ve aşağıdaki içeriği bu dosyaya yazın.
body {
background-color: #e3e3e8;
}
h1 {
background-color: #ff9900;
position: fixed;
text-align: center;
}
Html dosyasını açtığınızda arka plan renginin ve h1 tag'i içinde bulunan metnin arka plan renginin css dosyasında tanımlandığı gibi olacağını göreceksiniz. Html tag'lerinin tamamı Css dosyası içinde görsel olarak şekillendirilebilir. Bilinen Html tag'leri için değilde spesifik bir değişiklik yapılacak ise class kodu kullanılır. Ör;
<div class=test>Deneme Mesajı</div>
Burada tanımlanan class'ın Css dosyası içinde özellikleri yazılır. Class'lar başına nokta konularak css dosyası içinde tanımlanırlar.
.test {
text-align: center;
color: red;
}
Bu kodlar Html dosyasına eklendiğinde "Deneme Mesajı" sayfa ortasında kırmızı renkte görüntülenir.
