CSS ve HTML birlikte çalışır. Her iki teknoloji birbirini tamamlayan teknolojilerdir.
CSS, HTML dosyasına üç farklı şekilde eklenir.
Bu yöntemde tüm CSS kodları uzantısı .css olan bir dosyada tutulur.
Bu sayede tüm web sitesinin görünüşünü tek bir dosyadan değiştirmek mümkün olur. Bu yöntem en kullanışlı yöntemdir.
Bu yöntemde tüm HTML dosyaları still dosyasına referans içerir.
HTML sayfasının <head></head> arasına <link> etiketi ile .css dosyası linklenir.
<head>
<link rel="stylesheet" type="text/css" href="stildosyam.css">
</head>
Harici stil dosyası (.css) herhangi bir metin editöründe oluşturulabilir.
HTML dosyanızı oluşturduğunuz programda veya not defterinde oluşturabilirsiniz.
Still dosyası HTML etiketleri içermez. Sadece CSS kodları içerir.
Harici CSS dosyasının uzantısının .css olması gerekir.
Örnekte verilen stildosyam.css dosyasının içeriği şu şekildedir:
Harici yöntem ile eklenen CSS kodları, .css dosyasına link içeren tüm HTML sayfaları için geçerlidir.
CSS kodlarınızı dahili yöntem ile eklerseniz bu kodlar sadece tek sayfa için geçerli olur.
Dahili yöntemde CSS kodları <head> </head> etiketleri arasında konumlandırılır.
CSS kodları <head></head> etiketleri arasına <style> etiketi ile eklenir.
<head>
<style>
body {
background-color: #eeff44;
}
h1 {
color: #ff44cc;
margin-left: 40px;
}
</style>
</head>
CSS satır içi stil eklemede, stil sadece tek bir HTML elementi için geçerlidir.
Bu yöntem çok gerekmedikçe kullanılmaz.
Satır içi stil eklemede HTML elementine stil <style> etiketi ile yapılır. style etiketi CSS özellik ve değerlerini içerir.
Bir HTML sayfasında yukarıda bahsettiğimiz tüm CSS ekleme yöntemlerini aynı anda kullanabilirsiniz.
Pek çok uygulamada duruma göre yöntemlerin seçimine karar verirsiniz.
Peki aynı element için hem harici, hem dahili yöntemle CSS kodu yazılsa, hangisi etkin olacak?
Örneğin h1 etiketi için harici css dosyasında renk değiştiren şu kod olsa:
h1 {
color: blue;
}
Dahili olarak da şu CSS kodu yazılmış olsa:
h1 {
color: red;
}
Bu durumda son eklenen CSS kodu baskın olacaktır ve yazı red (kırmızı) görüntülenecektir.
<head>
<! -- stilldosyam.css içinde h1 için rek mavi olarak ayarlı-->
<link rel="stylesheet" type="text/css" href="/dosyalar/stildosyam.css">
<style>
h1 {
color: red;
}
</style>
</head>
Eğer dahili ve harici css yer değiştirseydi, bu durumda tam tersi olacaktı.
Harici CSS linki, dahili CSS kodundan daha önce geldiği için linklenmiş CSS kodu baskın olacak ve <h1> mavi görüntülenecektir.
<head>
<style>
h1 {
color: red;
}
</style>
<! -- stilldosyam.css içinde h1 için rek mavi olarak ayarlı-->
<link rel="stylesheet" type="text/css" href="/dosyalar/stildosyam.css">
</head>
CSS kodları HTML elementine aşağıdaki sıralama ile uygulanır:
Bu sıralama göre en baskın satır içi CSS uygulamasıdır. Yani bir HTML belgesinde tüm bu yöntemler kullanılmış olsa satır içi CSS ile na yazılmışsa o geçerli olur.