Css'i sitenize eklemenizin 3 yolu vardır.Bunlar;
- Kod İçerisine ekleyebiliriz
- Style etiketi kullanılarak ekleyebiliriz ( Head tagları arasına )
- Harici stil şablonu kullanarak ekleyebiliriz.
- @import kullanarak ekleyebiliriz.
1-Kod İçene Eklemek
1. Yöntemle<div> ve </div> etiketi içerisine style kullanarak ekleyebiliriz.Alttaki örneği dikkatlice bakarak nasıl eklendiğini daha iyi bir şekilde anlayabilirsiniz.
<div style=”background-color:#1f65d8; color:#fff;”>Css'i Kod İçerisine Ekleme</div>
2- Style Etiketi Kullanarak Eklemek (Head Tagları Arasına)
2.Yöntemle
<head> tagları arasına <style> kullarak oluşturduğumuz bir div etiketini web sitemizin head tagları arasına eklemiş olduğumuz her sayfasında kullabiliriz.
Bu etiketin kullanım örneği şu şekildedir. <div> arasına yukarda belirlemiş olduğumuz etiketi(id) adını doğru bir şekilde yazmalıyız.
Css kodlarımızın tümünü .css uzantılı bir dosyaya ekleyebiliriz bu eklediğimiz kodları sitemize çok kolay bir şekilde çağırıp kullanabiliriz.Bu yöntem diğer yöntemlerden daha fazla ilgi duymaktadır nedeni ise bir cssyi her sayfaya eklemek yerine bir dosyadan alarak sitemizin hızlanmasıdır.<head> tagları arasına <style> kullarak oluşturduğumuz bir div etiketini web sitemizin head tagları arasına eklemiş olduğumuz her sayfasında kullabiliriz.
<head><style type=”text/css”>#deneme-etiketi {background-color:#1f65d8;color:#fff;}</style></head>
Bu etiketin kullanım örneği şu şekildedir. <div> arasına yukarda belirlemiş olduğumuz etiketi(id) adını doğru bir şekilde yazmalıyız.
<div id=”deneme-etiketi“> Css'i siteme style kullnarak ekledim </div>
3- Harici CSS Dosyası Kullanarak Eklemek
Oluşturduğumuz bir .css uzantılı dosyayı sitemize çağırmamızı sağlayan kod aşağıdadır.Örnek dosyamızın ismi deneme.css olsun
<head>
<link rel=”stylesheet” type=”text/css” href=”deneme.css” />
</head>
4- @İmport ile Eklemek
@import sayesinde elimizdeki bir kaç css dosyasını tek bir dosya haline getirebilir ve sitemize ekleyebiliriz.Mesela elimizdeki deneme.css , test.css , ornek.css dosyaları mevcut bu dosyaları tek tek html içerisine eklemek yerine oluşturduğumu bir @import dosyası sayesinde daha hızlı bir şekilde sitemize ekleyebiliriz.Örnek dosyamızın ismi cssler.css olsun.
cssler.css dosyasının içeriği şu şekilde olmalıdır :
@import url(/css/deneme.css)
@import url(/css/test.css)
@import url(/css/ornek.css)
