HTML style niteliği, bir öğeye renk, yazı tipi, boyut ve daha fazlası gibi stiller eklemek için kullanılır. Bir HTML öğesinin stilini ayarlamak, style niteliğiyle yapılabilir. HTML style niteliğinin söz dizimi şu şekildedir:
<etiket style="property:value;">
Arka Plan Rengi – Background Color
CSS background-color özelliği bir HTML öğesinin arka plan rengini tanımlar. Bir sayfanın arka plan rengini değiştirmek için aşağıdaki kod kullanılabilir.
<body style="background-color:powderblue;">
<h1>Bu bir başlıktır</h1>
<p>Bu bir paragraftır.</p>
</body>
Yukarıdaki kodlar tarayıcıda aşağıdaki gibi görünecektir.
Resimde de görüldüğü üzere sayfanın arka plan rengi powderblue olarak ayarlanmış ve tüm sayfa bu renkle boyanmıştır. Eğer her bir öğenin renklerini ayrı ayrı değiştirmek istersek background-color özelliği her bir etikete ayrı ayrı uygulanmalıdır.
<body>
<h1 style="background-color:powderblue;">Bu bir başlıktır</h1>
<p style="background-color:tomato;">Bu bir paragraftır.</p>
</body>
Başlığın powderblue, paragrafın tomato olarak ayarlandığı sayfanın görseli aşağıdaki gibidir.
Yazı Rengi – Text Color
CSS renk özelliği bir HTML öğesinin metin rengini tanımlar. Bir HTML etiketinin yazı rengini değiştirmek için color niteliği kullanılır ve aşağıdaki kodlar kullanılabilir.
<h1 style="color:blue;">Bu bir başlıktır</h1>
<p style="color:red;">Bu bir paragraftır.</p>
Yukarıdaki kodlar tarayıcıda aşağıdaki gibi görünecektir.
<h1> etiketi için metin rengi (color) niteliği blue olarak belirlenmiş, <p> etiketi için color niteliği red olarak belirlenmiştir. Bu sayede başlık mavi, paragraf ise kırmızı renkle yazılmıştır.
Fontlar
CSS font-family özelliği, bir HTML öğesi için kullanılacak yazı tipini tanımlar. Etiketler için font belirtilmemiş ise üst seviye HTML etiketinin fontunu miras alır. Bir HTML etiketine aşağıdaki gibi font belirleyebiliriz.
<h1 style="font-family:verdana;">Bu bir başlıktır</h1>
<p style="font-family:courier;">Bu bir paragraftır.</p>
Örnekte, <h1> etiketi için verdana, <p> etiketi için courier font ailesi kullanılmıştır. İlgili kod tarayıcıda aşağıdaki gibi gösterilecektir.
Yazı Boyutu
CSS font-size özelliği bir HTML öğesinin metin boyutunu tanımlar. Etiketler için bir yazı boyutu belirtilmemiş ise eğer varsa o etiket için tarayıcı tarafından varsayılan olarak belirlenen yazı tipi boyutu kullanılır. Eğer etiket için tarayıcı tarafından belirlenen bir yazı tipi boyutu yoksa , eğer varsayılan değer yoksa etiketin bir üst seviye etiketine göre miras alarak belirlenir. font-size özelliğini aşağıdaki gibi kullanabiliriz.
<h1 style="font-size:300%;">Bu bir başlıktır</h1>
<p style="font-size:160%;">Bu bir paragraftır.</p>
<h1 style="font-size:10px">Bu bir başlıktır</h1>
<p style="font-size:16px;">Bu bir paragraftır.</p>
Yukarıdaki örnekte yazı tipi boyutu hem yüzde olarak hem de piksel cinsinden belirlenmiştir. Kodlar tarayıcıda aşağıdaki gibi görünecektir.
Metin Hizalama
CSS text-align özelliği, bir HTML öğesi için yatay metin hizalamasını belirler. Aşağıda başlık ve paragraf için metin hizalama örneği verilmiştir.
<h1 style="text-align:center;">Ortalanmış Başlık</h1>
<p style="text-align:center;">Ortalanmış paragraf.</p>
Başlık ve paragraf için text-align özelliği center olarak belirlenmiştir. Bu sayede başlık ve paragraf yatayda ortalı olarak yazılacaktır.
text-align özelliğini kullanırken center yerine başka değerlerde kullanabiliriz. Bunlar;
left: Yazıyı sola hizalar.
right: Yazıyı sağa hizalar.
center: Yazıyı ortalar.
justify: İki yana yaslı olarak yazar.