Google ve Youtube Reklamlarını Engelleyen Tarayıcı ve Uygulama İndir

HTML Stiller


Kırmızı renkli paragraf...

Yeşil renkli paragraf...

Mavi renkli paragraf...



HTML Stil Verme

HTML elementlerine style özelliği ile stil atayabiliriz.

Her HTML etiketinin varsayılan, ön-ayarlı bir stili vardır.(Arkaplan renginin beyaz, yazı renginin siyah olması gibi) Bir HTML elementinin varsayılan stilini değiştirmek için "style" özelliğini kullanırız.

Aşağıdaki örnekte varsayılan arkaplan rengini beyazdan kırmızıya, varsayılan metin rengini ise siyahtan beyaza değiştireceğiz:

Örnek

<body style="background-color:red">

  <h1 style="color:white">Bu bir başlık</h1>
  <p style="color:white">Bu bir paragraf.....</p>

</body>
Not background-color özelliği HTML eski versiyonlarında destekleniyor, ancak HTML5'te geçerli değil.

HTML Style Özelliği

HTML Style Özelliği aşağıdaki kelimelerle ilişkilidir:

style="özellik:değer"

özellik bir CSS özelliğidir, değer de bir CSS değeridir.

Bu eğitimde CSS ile ilgili daha fazlasını ilerleyen derslerde göreceksiniz. Daha fazlasını için ise CSS Dersleri sayfamızı inceleyebilirsiniz.


HTML Yazı Rengi

color özelliği HTML elementi için kullanılacak yazı rengini tanımlar:

Örnek

<h1 style="color:crimson">Kızıl (crimson) Renkli Başlığımız</h1>
<p style="color:blue">Mavi renkli paragrafımız.....</p>

HTML Yazı Tipleri

font-family özelliği HTML elementi için kullanılacak yazı tipini tanımlar:

Örnek

  <h1 style="font-family:impact">impact Yazı Tipli Başlığımız</h1>
  <p style="font-family:tahoma">tahoma yazı tipli paragrafımız.....</p>
  <p style="font-family:verdana">verdana yazı tipli paragrafımız.....</p>
  <p style="font-family:charcoal">charcoal yazı tipli paragrafımız.....</p>
Not <font> etiketi HTML'nin daha eski sürümlerinde destekleniyor, ancak HTML5'te geçerli değil.


HTML Yazı Boyutu

font-size (punto boyutu) özelliği HTML elementi için kullanılacak yazı boyutunu tanımlar:

Örnek

<h1 style="font-size:350%">% 350 Daha Büyük Puntolu H1 Başlığımız</h1>
<p style="font-size:200%">% 200 daha büyük puntolu paragrafımız.....</p>

HTML Yazı Hizalama

text-align özelliği HTML elementi için metnin nasıl hizalanacağını tanımlar:

Örnek

<h1 style="text-align:center">Ortaya Hizalı Başlık</h1>
<p style="text-align:left">Sola hizalı paragraf.....</p>
<p style="text-align:center">Ortaya hizalı paragraf.....</p>
<p style="text-align:right">Sağa hizalı paragraf.....</p>
Not <center> etiketi HTML'nin daha eski sürümlerinde destekleniyor, ancak HTML5'te geçerli değil.


Konu Özeti

  • HTML elementlerine stil, biçim vermek için style özelliğini kullanın
  • Arkaplan rengi için background-color özelliğini kullanın
  • Yazı rengi için color özelliğini kullanın
  • Yazı tipleri için font-family özelliğini kullanın
  • Yazı, punto boyutu için font-size özelliğini kullanın
  • Metni, yazıyı hizalamak için text-align özelliğini kullanın

Yorumlar