Bu yazımızda css kodlarının veya dosyalarının html içerisine ekleme yöntemleri ni anlatacağız. Üç tane ekleme yöntemi vardır. Bunlar html etiketlerine attribute değeri (inline:satır içi) ile, iç stil kodları ve dış stil dosyası yöntemleri şeklindedir.
CSS Olmadan Html Sayfası Kodu:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Satır içi Kod Yazma </h1>
<p>Satır içi Kod Yazma</p>
</body>
</html>Sonuc:
Gördüğümüz gibi varsayılan değerler ne ise o şekilde geliyor. Biçimlendirme kodları ile değişiklik yapalım.
1- Satır içi (inline) CSS Kodları Ekleme Yöntemi
Html etiketlerinin “style” attribute değerinde biçimlendirme kodlarımızı yazarak yaparız.
Örnek Kod Yazımı:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:yellow;text-align:center;"> </h1> <!-- h1 etiketi için -->
<p style="color:red;">Satır içi Kod Yazma</p> <!-- p etiketi için -->
</body>
</html>Sonuc:
Yukarı da gördüğümüz gibi hangi etikette biçimlendirme yapmak istiyorsak o etiketin “style” attribute değerinde yazarak rengini, boyutunu vb. biçimlendirmeler yapabiliriz. Çok tercih edilmeyen bir yöntemdir. Özel durumlarda, sadece bir etikete bir yerde biçimlendirme yaptığımızda tercih edilen bir yöntem.
2- İç Stil Kodları Ekleme
Bu yöntem de “style” etiketi açarız ve burada kodlarımızı yazarız. Hangi etiketi biçimlendirmek istiyorsak onu şeçeriz ve sonrasında onun için biçimlendirme kodlarımızı yazarız. <style> etiketi <head> etiketleri içine yazılır.
Örnek Kod Yazımı:
<!DOCTYPE html>
<html>
<style>
h1{ /*h1 etiketi için css kodu yazıyoruz */
color:red;
text-align:center;"
}
p{ /*p etiketi için css kodu yazıyoruz */
color:blue;
}
</style>
<body>
<h1>Satır içi Kod Yazma </h1>
<p>Satır içi Kod Yazma</p>
</body>
</html>Sonuc:
3- Dış CSS Ekleme Yöntemleri
Bu yöntemde CSS kodları farklı bir dosya içine yazılarak, css dosyası olarak kaydedilir ve sonrasında html dosyasına eklenir. Bu işlemi “<link rel=”stylesheet” type=”text/css” href=”bizimdosyamız.css>” içinde gördüğümüz gibi yaparız. “href” attribute nde dosyamızın yeri ve adı yazarız. Aynı dizinde ise dosyanın adını yazmamız yeterli olacaktır.
Örnek Kod:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="benimStilim.css"> /* CSS dosyamızı bu şekilde ekliyoruz.. */
</head>
<body>
<h1>Dış Stil Dosyası Tanımlama</h1>
<p>Dış Stil Dosyası Tanımlama</p>
</body>
</html>CSS kodları:
h1{
background-color:red;
color:white;
}
p{
font-size:16px;
}Yukarıdaki kodları not defteri, dreamweaver, visual studio code, Notepad++ vb.. html yazdığımız herhangi ortamda yazdıkdan sonra “.css” uzantısı ile kaydetmemiz yeterlidir. Yukarıdaki örnekte dosyanın ismini “benimStilim.css” verdik.
Birden Fazla CSS Dosyası Ekleme Yöntemi
Birden fazla CSS dosyası eklenebilir. Birden fazla yerde aynı etikete biçimlendirme yaptığımızda, son biçimlendirme yaptığımız css dosyasındaki değişiklik geçerli olur. Örnek vermek gerekirse bir paragrafın arka plan rengini (background-color) değiştiriyorsak en son ki css dosyasında hangi rengi tanımlamışsak o rengi alır. Bu işlemi yine “link” değerleri ile yapılır.
Kod Kısmı:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="benimStilim1.css"> <!--1.stil dosyamız -->
<link rel="stylesheet" type="text/css" href="benimStilim2.css"> <!-- 2.stil dosyamız -->
<link rel="stylesheet" type="text/css" href="benimStilim3.css"> <!-- 3.stil dosyamız -->
</head>
<body>
<h1>Dış Stil Dosyası Tanımlama</h1>
<p>Dış Stil Dosyası Tanımlama</p>
</body>
</html>Neden birden fazla css dosyası ekliyoruz sorusu aklınıza gelebilir. Öncelikle hazır kullandığımız framework ler olabiliyor, onları ekliyoruz daha sonra kendi yazdığımız dosyayı ekliyoruz. Kendi yazdığımız dosya daima en altta olmasına dikkat etmek zorundayız. Tarayıcılar üstten başlayarak okur ve en son alttaki işlemi yaparlar.
Css ekleme yöntemleri konusunda anlatacaklarımız bu kadar. Css dosyasına başka Css dosyası ekleme yöntemleri dersimizi incelemenizi tavsiye ederim.
Başka bir yazımızda görüşmek üzere…
