HTML Sayfasına CSS Eklemek

HTML sayfalarını şekillendirmek için CSS kodlarını kullanıyoruz. CSS ile HTML elementlerine sayısız biçim verebiliriz

Örneğin bir form elementinin genişliğini, yüksekliğini, pozisyonunu ayarlayabiliriz. Kısacası istediğimiz sayfa düzenini oluşturabiliriz. Peki CSS kodlarını HTML içerisinde nasıl kullanabiliriz? Bunun için 3 yöntemimiz var.

HTML elementi içerisinde style özelliğini kullanabiliriz.
<head> etiketi içerisinde <style> elementi ile kodları ekleyebiliriz.
Dışarıdan CSS dosyasını sayfaya dahil edebiliriz.
SATIR İÇİ CSS ÖZELLİĞİ EKLEME
Satır içi CSS özelliği ile herhangi bir HTML elementini biçimlendirebiliriz. Bu özellikler sadece style özelliğinin kullanıldığı elemente uygulanır. Bir örnek verelim.

1
<p style="color:blue;">Mavi renkte paragraf</p>
CSS kullanarak sayfa içerisindeki bir paragrafın rengini değiştirdik. Bu yapıyı kullanmak için HTML elementinin başlangıç etiketi içerisinde style özelliğine yer verdik.

DAHİLİ CSS ÖZELLİĞİ EKLEME
Yukarıdaki örnekte sadece bir paragraf elementine CSS özelliği uyguladık. Birden fazla paragrafa aynı özelliği uygulamak istersek ayrı ayrı bu kodu eklememiz gerekmiyor. Bunun yerine <head> etiketi arasında <style> etiketini kullanıyoruz. Bu etiketin arasına yazılan her CSS kodu sayfanın tümünde karşılık bulduğu elemente uygulanır. Örneği genişletelim.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<style>
p {color:green;}
</style>
</head>
<body>

<p>İlk paragraf</p>
<p>İkinci paragraf</p>

</body>
</html>
Sayfaya bir paragraf daha ekledik ve her ikisinin de rengini değiştirdik. Kısaca CSS kodlarının nasıl ekleneceğini açıklayalım.

<style> etiketleri arasında CSS seçicileri kullanılır. Bir sınıf, id, çocuk element veya direk olarak sayfadaki herhangi bir element türü belirtilir. Burada paragrafları seçtik. Ardından süslü parantezler içerisine CSS özellikleri yazılır ve her yeni özelliğe geçilirken aralarına noktalı virgül konulur. Örneğin paragraf elementinin bir de yazı büyüklüğünü değiştirelim.

1
2
3
4
p{
color:green;
font-size:14px;
}
DIŞARIDAN CSS DOSYASI ÇAĞIRMAK
Satır içi CSS ile sadece bir elemente özellikleri uyguladık. Dahili CSS ile sayfadaki birden fazla elementi biçimlendirdik. Aynı CSS kodlarını farklı sayfalarda kullanmak için ise bir CSS dosyası oluşturup bunu her sayfada çağırıyoruz. Bu sayede bu dosyada yapacağınız tek bir değişiklik ile tüm sitenin görünümünü değiştirebilirsiniz. css uzantılı dosyayı sayfada çağırmak için <head> etiketleri arasında <link> etiketini kullanıyoruz. Örneğin aşağıdaki gibi bir style.css dosyası oluşturalım ve mevcut sayfada bu dosyayı çağıralım.

1
2
3
4
p {
color:green;
font-size:14px;
}
Yukarıdaki kodlamaya dikkat ederseniz sadece CSS kodları yazılmıştır. Bu dosyayı sayfaya ekleyelim.

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<p>İlk paragraf</p>
<p>İkinci paragraf</p>

</body>
</html>
Sayfa içerisinde herhangi bir CSS kodu kullanmadık. Bunun yerine dışarıdan dosya çağırarak sayfayı biçimlendirdik.

<link> etiketi ile kullanılan rel dosya türünü, href ise dosyanın yolunu belirtmektedir.

HTML KOD YAZARI ALİ AKKEÇECİ

Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git