HTML style özelliği, bir öğeye renk, yazı tipi, boyut ve daha desteklediği bir çok özellik eklemek için kullanılır.
<!DOCTYPE html>
<html>
<body>
<p>Normal Bir Yazı</p>
<p style="color:red;">Kırmızı yazı</p>
<p style="color:blue;">Mavi Yazı</p>
<p style="font-size:50px;">50 Piksellik Büyük Yazı</p>
</body>
</html>
HTML style Özelliği
Bir HTML öğesinin stilinin ayarlanması style özelliğiyle yapılabilir.
HTML style özelliği aşağıdaki syntax (sözdizimine) sahiptir:
<etiketAdi style="özellik:deger;">Özellik ve değer CSS özelliği ve CSS değeridir.
Arka Plan Rengi
CSS background-color özelliği, bir HTML öğesinin arka plan rengini tanımlar.
Aşağıdaki kod HTML sayfasının arka plan rengini toz mavi olarak ayarlar,
<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">
<h1>Bu Başlık</h1>
<p>Bu bir paragraf.</p>
</body>
</html>
İki farklı öge için arka plan rengi ayarlamak da mümkün;
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:powderblue;">Bu bir Başlık</h1>
<p style="background-color:tomato;">Bu bir paragraf.</p>
</body>
</html>
HTML Yazı Rengi
CSS color özelliği, bir HTML öğesinin metin rengini tanımlar:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">Başlık</h1>
<p style="color:red;">Paragraf.</p>
</body>
</html>
HTML Font (Yazı Tipi)
CSS font-family özelliği, bir HTML öğesi için kullanılacak yazı tipini tanımlar:
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">Verdana Fontuyla Bir Başlık</h1>
<p style="font-family:courier;">Courier Fontuyla Bir Paragraf.</p>
</body>
</html>
HTML Yazı Boyutu
CSS font-size özelliği, bir HTML öğesinin metin boyutunu tanımlar:
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:300%;">Bu Bir Başlık</h1>
<p style="font-size:160%;">Bu Bir Paragraf.</p>
</body>
</html>
HTML Metin Hizalama
CSS text-align özelliği, bir HTML öğesi için yatay metin hizalamasını tanımlar:
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Ortalanmış Başlık</h1>
<p style="text-align:center;">Ortalanmış Paragraf.</p>
</body>
</html>
Bölüm Özeti
- HTML öğelerini şekillendirmek için style özelliğini kullanın
- Arka plan rengi için background-color kullan
- Metin renkleri için color özelliğini kullanın
- Metin yazı tipleri için font-family kullanın
- Metin boyutları için font-size kullanın
- Metin hizalaması için text-align kullanın
