Html 5 bölümünde bir çok html 5 etiketinin kullanımını öğrendik. Dikkat ederseniz eklediğiniz her html etiketinin görüntülenme şekli tarayıcının önceden o html etiketi için belirlediği bir başlangıç değeri ile olmaktadır. Peki web sayfalarımızda css kodlarını nasıl kullanırım ? Css ile html sayfalarında neler yapabiliriz ? Web sayfalarına stil kodları nasıl ekleriz ?
Örneğin; h1 etiketi chrome tarayıcı için 32px olarak belirlenmiş ve her h1 etiketini kullandığımızda 32 px lik koyu bir yazı karşımıza çıkıyor. Ya da kullandığımız <p> etiketleri için üstten ve alttan biraz boşluk (margin) bırakılır. Ancak tarayıcıların html etiketleri için atadıkları bu başlangıç değerlerine (css özellikleri) rağmen sitelerimiz soluk ve cansız bir şekilde karşımıza çıkmaktadır.
Günümüz web sayfalarında görsellik daha da ön çıkmaktadır dolayısıyla her html etiketi için varsayılan görüntü biçimini değiştirebileceğimiz bir araca ihtiyacımız var. Bu araç yani kodlama dili Css (Cascading Style Sheet) 'dir.
Örneğin sayfa üzerinde bulunan <h1> etiketi için css kodu yazalım ;
<h1>Sayfa Başlığı</h1>
css kodunu aşağıdaki gibi yazıyoruz.
h1 {
font-size:50px;
color: red;
}
Örnek için tıklayınız.
Burada css kodları ile html sayfası üzerindeki tüm h1 etiketlerinin font büyüklüğünü 40 px ve yazı renginin mavi olarak ayarlanmasıdır.
En basitiyle bir css kodunun hangi amaçla kullanıldığını ve nasıl yazıldığını öğrendik. Bu dersimizden itibaren css kodlarının nasıl yazıldığını öğrenmeye başlayacağız.