Css kodlarımızı kullanıldığı yerlere göre 3 farklı şekilde tanımlayabiliriz:
inline css:
Sadece tanımlandığı html etiketi içinde geçerlidir.
Inline css kodları direkt etiket içine yazılır ve sadece o etikete uygulanır.
Inline css, diğer css yazılış biçimlerini ezer yani html etiketinin içinde yazılan css kodu geçerli olur.
Başka bir deyişle daha sonra göreceğimiz internal css ve external css kodları geçersiz olur.
Örnek bir inline css yazılışı:
<h1 style="color:red;"> Merhaba </h1>
Yukarıdaki örnekte sadece ve sadece ilgili h1 başlığında bulunan yazı rengi değişecektir.
internal css:
Internal css yazılış biçiminde kodlar <head> etiketleri arasına yazılır. css kodlarınının kendisi de <style> etiketi içerisine alınır. Internal olarak tanımlanan css kodları sadece bulunduğu html sayfasını ilgilendirir. Örneğin yazı rengini kırmızı yapmışsak sadece kodları yazdığımız sayfadaki yazılar kırmızı olur. Diğer html sayfaları bundan etkilenmez.
Örnek bir internal css yazılışı:
Diyelim ki ozgecmis.html adlı bir sayfamız var. Bu sayfada bulunan head etiketleri arasına aşağıdaki kodları yazıyoruz.
<head>
<style>
h1 {
font-size :32px;
color :blue;
}
</style>
</head>
Yukarıdaki örnekte sadece ve sadece özgecmis.html sayfasında bulunan h1 başlıklarının yazı rengi mavi ve fontu 32px olarak değişecektir.
external css:
Eğer tanımladığımız css kodları birden fazla html sayfasını ilgilendiriyor ise bu durumda .css uzantılı harici bir dosya oluşturup bu dosya içerisine css kodlarımızı tanımlamamız gerekir.
Harici .css uzantılı dosyaya yazdığımız css kodlarını hangi html sayfasına eklemek istiyorsak o html sayfası ile css dosyasını birbiriyle bağlamamız gerekiyor. Bunun için <head> etiketleri arasına aşağıdaki gibi bir ifade yazmalıyız.
<head>
<link rel=”stylesheet” href=”style.css”>
</head>
Yukarıdaki örnekte href etiketinin içine harici olarak oluşturduğumuz css dosyasının adını yazmalıyız. Örnekte style.css adlı bir dosya oluşturduk ancak siz istediğiniz ismi verebilirsiniz, uzantı ise .css olmalıdır. Ör: renkler.css, my.css vbs...