CSS Türleri
CSS türleri nelerdir? Harici CSS, Dahili CSS ve Satır İçi CSS nedir? Gelin hep birlikte öğrenelim.
CSS 3 farklı türden oluşur.
- Harici CSS (External CSS)
- Dahili CSS (Internal CSS)
- Satır İçi CSS (Inline CSS)
Harici CSS (External CSS)
Harici bir stil (CSS) dosyasıyla, yalnızca bir dosyayı değiştirerek tüm bir web sitesinin görünümünü değiştirebilirsiniz.
Farzedelim ki, index.html ve about.html olmak üzere 2 adet sayfamız var. Bu iki sayfada da <p> etiketi için ortak olan css kodları yazmak istiyoruz. Bu durumda "Harici CSS (External CSS)" kullanmalıyız. Yeni bir .css uzantılı bir dosya oluşturup, bu dosya içine ortak olan css kodlarını eklemek en kolayı olacaktır. Böyle bir dosya oluşturduğumuzda, 2 farklı HTML sayfasındaki <p> etiketlerinin stil özelliklerini tek bir dosya ile kontrol edebiliyor olacağız.
Bu oluşturmuş olduğumuz harici .css uzantılı dosyayı HTML sayfamıza tanımlamamız gerekiyor. Bunun için, HTML sayfamızdaki head bölümünün içerisine <link> öğesi oluşturup, bu öğe ile harici .css dosyamızı HTML sayfamıza tanıtmalıyız.
Örnek Kullanım:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stil.css">
</head>
<body>
<h1>Bu bir başlıktır.</h1>
<p>Bu bir paragraftır.</p>
</body>
</html>
Dahili CSS (Internal CSS)
Tek bir HTML sayfasında geçerli olacak stil öğeleri için "Dahili CSS (Internal CSS)" kullanmalıyız.
Dahili CSS (Internal CSS) HTML sayfamızdaki <head> </head> etiketleri arasına, <style> </style> etiketleri eklenerek kullanılır.
Örnek Kullanım:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: red;
}
h1 {
color: blue;
margin-left: 31px;
}
</style>
</head>
<body>
<h1>Bu bir başlıktır.</h1>
<p>Bu bir paragraftır.</p>
</body>
</html>
Satır İçi CSS (Inline CSS)
Satır içi CSS (Inline CSS), tek bir öğeye benzersiz bir stil uygulamak için kullanılabilir.
Satır içi CSS (Inline CSS) kullanmak için ilgili öğeye stil niteliğini ekleyin. Stil niteliği herhangi bir CSS özelliğini içerebilir.
Örnek Kullanım:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:red;text-align:center;">Bu bir başlıktır./h1>
<p style="color:blue;">Bu bir paragraftır.</p>
</body>
</html>
Tepkiniz Nedir?
