HTML kodları ile sitemizin temel iskeletini, yapısını ve verilerini oluştururuz. CSS ile bu oluşturduğumuz yapıları özelleştirebilir, stil şablonlarını belirleyebilir, nasıl görüneceğini belirleme imkanımız olur. Örneğin yazdığınız bir başlık yazısının rengini font büyüklüğünü, CSS ile düzenleyebilir, şekil verebilirsiniz.
CSS Kodlarımızı <head> ... </head> etiketleri arasında, <style> ... </style> şeklinde belirtmekteyiz.
Aynı zamanda etiket içerisinde de css kodunu belirtebiliriz.
CSS ile etiketlerimizi biçimlendirirken ıd ve class sınıflarının ne olduğunu anlamamız gerekmekte.
Aşağıda ki vereceğim örnekler anlamanıza yardımcı olacaktır.
İçindekiler
Etkiket içerisinde CSS kodu kullanmak
HTML sayfasının arka plan rengini kırmızı yapmak istersek;
1 | <body style="background: red;"> Kod Kampüsü </body> |
Bir paragraf yazısının rengini pembe yapmak istersek;
1 | <p style="color: pink;"> Kod Kampüsü </p> |
<style> etiketleri arasında CSS kodu kullanmak
HTML sayfasının arka plan rengini kırmızı yapmak istersek;
1 2 3 4 5 6 7 | <head> <style> body { background: red; } </style> </head> |
Sayfa içindeki tüm etiketleri seçmek
Bir html dökümanı içerisinde birden fazla <h1> başlığı olduğunu düşünelim, bu başlıkların hepsini tek seferde biçimlendirebiliriz.
Örneğin bütün başlıkları sağa yaslı, rengi mavi yapmak istersek aşağıdaki örnekte gibi olacaktır.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <head> <style> h1 { text-align: right; color: blue; } </style> <body> <h1>Başlık 1</h1> <h1>Başlık 2</h1> <h1>Başlık 3</h1> </body> </head> |
Belirli bir öğeyi seçmek için id özelliğini kullanmak
Etiketleri id ile seçmek için # işareti kullanılır. Etiketlere ilk başta bir isim verilir ve bu isim seçilerek özelleştirmeler yapılır.
Örneğin <p> türünde paragrafımız var, ismi de “paragraf1” , bu yazının rengini turuncu yapmak istiyoruz.
1 2 3 4 5 6 7 8 9 10 | <head> <style> #paragraf1 { color: orange; } </style> <body> <p id="paragraf1">Kod Kampüsü - HTML CSS Dersleri</p> </body> </head> |
Bir sınıfı seçmek için class özelliğini kullanmak
Etiketleri class ile seçmek için . işareti kullanılır. Etiketlere ilk başta bir isim verilir ve bu isim seçilerek özelleştirmeler yapılır.
Örneğin <p> türünde paragrafımız var, ismi de “paragraf1” , bu yazının rengini mor yapmak istiyoruz.
1 2 3 4 5 6 7 8 9 10 | <head> <style> .paragraf1 { color: purple; } </style> <body> <p class="paragraf1">Kod Kampüsü - HTML CSS Dersleri</p> </body> </head> |
Daha iyi anlaşılması açısından, hem id özelliğini hem de class özelliğini bir arada kullanarak nasıl yazıldığını inceleyelim..
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <head> <style> #paragraf1 { /* id ismi paragraf1 olanın rengini turuncu yaptık */ color: orange; } .paragraf1 { /* class ismi paragraf1 olanın rengini mor yaptık */ color: purple; } </style> <body> <p id="paragraf1">Kod Kampüsü - HTML CSS Dersleri</p> <p class="paragraf1">Kod Kampüsü - HTML CSS Dersleri</p> </body> </head> |
