Css Nedir? Sayfaya nasıl dahil edilir?

Merhaba arkadaşlar , bu makalemdeki konum css nedir? ,  Css web sitemize nasıl dahil edilir?

Css sitemize şekil vermemizi sağlar.Yazılarımızdan tutun sitede gördüğünüz her şeklin bir stili vardır.Resmin nerde duracağı ne kadar aşağıda duracağı ne zaman büyüyeceği gibi bir sürü özelliği css ile verebiliriz.Şimdi css'in nasıl dahil edileceğinden bahsedelim.
Css'i sitemize dahil etmemizin 3 yolu vardır;

1)Html tagına dahil etme
h1 etiketimizin yanına style="" yazarız ve tırnak içerisinde istediğimiz özellikleri belirtiriz.
Örnek:
< p style="color:#f9d96f;font-size:24px;"> Deneme < /p>
Ekran Çıktısı: Deneme
Color: Renk kodumuzu yazdık bunu colorcop programı ile yapabiliriz.
Font-size: yazımızın büyüklüğünü ayarlamamıza yarar.

2)Head etiketi içerisine yazmaSayfanın head tagı içerisinde < style> < /style> arasında html kodlar arasında taga verdiğimiz class(sınıf) veya id(kimlik)'ye stil yazabiliriz.Daha iyi anlayabilmeniz için bir örnek yazalım .
Örnek
< head>
< style>
.ornek{color:#f9d96f;font-size:24px;}
< /style>
< body>
< p class="ornek">Deneme < /p>
< span class="ornek"> Dünya < /span>
< /body>
</head>

Yukarıda gördüğünüz gibi p'ye ve span'a  class verdik ve bu classta olan tüm taglara aynı özellikleri verdik.
Ekran Çıktısı: Deneme Dünya
3)Ayrı bir css dosyasını dahil etme< link rel="stylesheet" href="stil.css">
Href ile dosyamızın yerini belirtiyoruz.
Örnek:

İndex.html
< head>
< link rel="stylesheet" href="stil.css">
< /head>
< body>
< p class="ornek">Deneme < /p>
< span class="ornek"> Dünya < /span>
< /body>
< /head>
Stil.css.ornek{color:#f9d96f;font-size:24px;}

Ekran Çıktısı: Deneme DünyaNotlar:Stil.css ile tüm sayfamızda classlar vererek daha anlaşılır ve kullanılabilir kodlar yazabiliriz.

Yeni yazımızı inceleyebilirsiniz