HTML’de Stiller: CSS Girişi

HTML’de Stiller

HTML’de sayfaya arka plan rengi verme

background-color özelliği HTML sayfalarında arka plan rengi vermek için kullanılır.

Örnek:

<body style="background-color:blue;">

<h1>Mavi arka plan rengi verme</h1>

</body>

Örnekten de anlayacağınız üzere background-color özelliğine yazılan blue değeri sayfanın arka planının mavi renkte olacağını belirtmekte.
CSS’teki renk adları İngilizcedir; bu yüzden vereceğiniz renkleri ya İngilizce adlarıyla (blue, red) ya da o rengin renk koduyla (#0000ff) yazarsınız.

HTML’de yazıya renk verme

color özelliği bir HTML öğesindeki yazının rengini belirler.
Hemen bir örnek verelim:

<h1 style="color:blue;">Bu bir başlıktır!</h1>
<p style="color:red;">Bu bir paragraftır!</p>

style özelliği ile bu yazıya bir stil vereceğimizi belirtiriz; color ile de bu yazının rengini değiştirmek istediğimizi tarayıcıya bildirmiş oluruz.

HTML’de yazı tipini değiştirme

font-family özelliğini kullanarak yazının yazı tipini (font) değiştirebiliriz.
Şimdi vereceğimiz örnekle ne demek istediğimizi daha iyi anlayacaksınız.

<h1 style="font-family:verdana;">Bu bir başlıktır!</h1>
<p style="font-family:courier;">Bu bir paragraftır!</p>

Biz bu örnekte Verdana ve Courier yazı tiplerini kullandık. Sizler de örnekteki yazı tiplerini kendi istediğiniz yazı tipleriyle değiştirerek deneyebilir, kendi gözünüzle görerek pekiştirebilirsiniz.

HTML’de yazı boyutunu değiştirme

font-size özelliğini kullanarak yazıların boyutlarını istediğiniz gibi değiştirebilirsiniz.

<h1 style="font-size:300%;">Bu bir başlıktır!</h1>
<p style="font-size:160%;">Bu bir paragraftır!</p>

Örnekte görmüş olduğunuz % işaretiyle verilmiş değerler, yazının yüzde cinsinden boyutlandırıldığını tarayıcıya belirtir.

HTML’de metin hizalama

text-align özelliği metinleri yatayda hizalamak için kullanılır (sola, sağa, ortaya, iki yana).

Örnek:

<h1 style="text-align:center;">Ortalanmış başlık</h1>
<p style="text-align:center;">Ortalanmış paragraf.</p>

Evet, bu dersimizde HTML’de stilleri, sayfaya arka plan rengi vermeyi, yazı rengini değiştirmeyi, yazı tipini ve boyutunu değiştirmeyi ve metinleri hizalamayı öğrendik. Bir sonraki derste görüşmek üzere, hoşça kalın.