Css(Cascading Style Sheet) html sayfalarının görünümünü şekillendirmeye yarayan stil dilidir.Bu web teknolojisi internet sayfamızın harflerin rengini, boyutunu, genişliğini, büyüklüğünü vb. özelliklerini değiştirmek için kullanılır.Bu teknik esneklik bakımından css 3.0 daha ileriye ulaşmıştır.Biz sitemize css dosyalarımızı iki yolla sitemize ekleyebiliriz.
Birinci yolumuz css direk html sayfamızın içine ekleme ikinci yol ise dışardan ayrı bir dosya olarak sayfaya çekmektir.Genelde kullanılan dışardan ayrı bir dosya olarak çağırmaktır.Birinci yolun azalıp bırakılmasının sebebi günümüz teknolojilerinin gelişimiyle ortaya çıkan seonun yarattığı etki nedeniyle bu kullanım şekli istenmektedir.Ben yine de iki yolunda anlatımını yapacağım.
CSS Direk Html Sayfasına Ekleme
Bunu yapabilmek için html sayfamızda bulunan head taglarını bulup buraya style tagları eklemektir.Bu style tagların arasına css kodlarımızı yazıyoruz.Style taglarının bir örneği yapalım;
<style>
body{background: pink; color: black;}
h1{color: gray;}
p{color: #964B00;}
a{color: blue; text-decoration: none;}
</style>Şimdi bunu bir html sayfasına örnekle gerçekleştirelim.Bu html sayfasının adını index.html yapalım.Aşağıdaki kodlar ekleyelim;
<html>
<head>
<style>
body{background: pink; color: black;}
h1{color: gray;}
p{color: #964B00;}
a{color: blue; text-decoration: none;}
</style>
</head>
<body>
body arkaplan renginin pembe yazı renginin ise siyahdır.
<h1>h1 elementinin yazı rengi gri</h1>
<p>p elementinin yazı rengi kahverengi</p>
<a href="#">Link Rengi mavidir</a>
</body>
</html>Ekran Çıktımız:
Görüldüğü head tagları arasına style tagları ekledik ve css kodlarımızı ekledik.Gördüğünüz gibi h1 elementi rengi gri, p elementinin kahverengi ve link renkleri mavidir.
CSS Dışardan Html Sayfasına Ekleme
Css dışardan çağırmak için yapmamız gelene.Yine önceden yaptığımız gibi head taglarını buluyoruz ve oraya aşağıdaki gibi dosyanın bulunduğunu dizine göre düzenliyoruz.Eklememiz gereken kodlar;
<link rel="stylesheet" href="./style.css" type="text/css">
href kısmını dediğim gibi resim yolunu kendi göre düzenlemeyi unutmayın.Önceden yaptığımız index.html sayfasındaki style taglarını kaldırıp yerine yukarıdaki link kodunu ekliyoruz.Aşağıdaki örnek koda ulaşıyoruz;
<html> <head> <link rel="stylesheet" href="./style.css" type="text/css"> </head> <body> body arkaplan renginin siyah yazı renginin ise beyazdır. <h1>h1 elementinin yazı rengi sarı</h1> <p>p elementinin yazı rengi kırmızı</p> <a href="#">Link Rengi yeşildir</a> </body> </html>
Bu koda ait ekran görüntümüz;
bu şekilde oluyor paragraf rengi kırmızı linklerimizin rengi yeşil oluyor.Bu sayede css ile çalışmaya hazırız.
CSS Kod Yazma Kuralları
Css kodlarını yazmak için çok fazla yok.Dikkat etmeniz ufak tefek nüanslar var o kadar gözde büyütmeye gerek yok.Öncelik bir element seçelim.Ben paragraf elementi olan p seçtim.p nin rengini mor ve kalın olmasını istiyorum.Burada dikkat etmeniz gereken birincisi elementi yazıyoruz ve süslü parantezlerimizi({}) açıyoruz yazmak istediğimiz özelliği yazıp iki nokta üst üstte(:) koyarak değerini yazarak noktalı virgülle kapatıyoruz.Birden fazla özellik eklemek istediğimizde kesinlikle noktalı virgül koymalıyız.Yukarıdaki verdiğim paragraf elementinin css kodlarını yazarsak;
p{
color: purple; /* Yazı rengi mor */
font-weight: bold; /* Yazıyı kalınlıştırdık */
}