Html sayfalara Css Eklemenin 4 farklı yolu vardır. Bunlardan birer birer bahsedelim.
1. Yöntem –> Kod İçinde (In-Line Style )
Bu yöntemde yazmak istediğimiz Css kodlarını html sayfa içerisinde bulunan nesnelere uygularız. Bu bir tablo olabilir, div olabilir, yazı olabilir..
Örneğin sayfamızda
<div>Menü</div> menü içeriğine sahip bir div var.
Biz bu div’in arkaplanını mavi, içerisinde bulunan yazıların rengini de beyaz yapmak isteyelim. Bunu da “inline style ” ile yapalım.Inline style ile yazabilmek için, css uygulayacağımız alana “style” kodunu girmemiz gerekiyor. “style” kodundan sonra css özelliklerimizi yazabiliriz.
<div style=”background-color:#1f65d8; color:#fff;”>Menü</div>
2.Yöntem –> Head Tag’ları Arasına Style Tanımlamak
Bu yöntemde ise, css uygulayacağımız div’e bir id tanımlıyoruz. Tanımladığımız bu id’ye göre <head></head> tagları arasında Style tanımlayarak Css özelliklerimizi yazıyoruz. Fakat head tagları arasındaki css kodlarımızı yazarken dikkat etmemiz gereken, Css uygulayacağımız alan bir div ise “#” işareti kullanıyoruz. Eğer genel bir stilse “.” işareti kullanıyoruz. Örnek:
<head>
<style type=”text/css”>
#test{
background-color:#1f65d8;
color:#fff;
}
</style>
</head>
<body><div id=”test“>Menü</div></body>
3.Yöntem –> Harici Css Dosyası Kullanmak
Bu yöntemde tüm css kodlarımızı .css uzantılı bir dosya içerisinde tutar ve bu dosyayı HTML sayfası içerisine basit bir kodla çağırabiliriz.
Örneğin Css dosyamızın adı tasarim.css olsun ve bu dosyayı Html sayfaya eklemek için HTML içine yazmamız gereken kod şu şekildedir. ( Head tagları arasına yazıyoruz )
<head>
<link rel=”stylesheet” type=”text/css” href=”tasarim.css” />
</head>
4.Yöntem –>@import le Eklemek
Bu yöntem ise elimizde bulunan birden fazla css dosyasını tek bir css dosyasından okutmak için kullanılır. Yani şöyle diyelim elimizde tasarım.css, stil.css, menu.css, arkaplanlar.css adlarında 4 tane css dosyası olsun. Bunları tek tek html içerisinde okutmaktansa, tek bir css içerisinden çağırıp, o css içerisinden okutmak daha iyi olacaktır. HTML sayfa da sorgu sayısı azalacağından, sitenizin açılması hızlanacaktır.
Bu 4 css dosyasını cssler.css dosyasından okutalım.
cssler.css dosyasının içeriği şu şekilde olmalıdır :
@import url(/css/tasarim.css)
@import url(/css/stil.css)
@import url(/css/menu.css)
@import url(/css/arkaplanlar.css)
