Html Stiller

Html dilinde sayfanın tasarımını değiştirmek için stiller eklenmektedir. Html ögelerinin stillerini değiştirmek için style özelliği kullanılmaktadır. Bu kullanacağımız özellik Html ile hazırladığımız web sitelerinde Css dilinde satır içi olarak adlandırılan özellik kullanılmaktadır.

Css Dersleri konusunda da detaylı bir şekilde gireceğimiz konulardan şimdilik kısaca bahsedelim. Bu dersimizde:

  • Arkaplan Rengi
  • Yazı Rengi
  • Yazı Tipi
  • Yazı Boyutu
  • Metin Hizalama 

işlemlerinin style (stil) özelliği ile nasıl yapıldığını anlatacağız.

Html Stil Özelliği Kullanımı:

<etiket_adi style="özellik:değer;">   </etiket_adi>

 

Html Arkaplan Rengi (background-color)

Html ögelerinin arkaplan rengini stil özelliği kullanarak belirlemek için background-color özelliği kullanılmaktadır.

Background-color Özelliği Kullanımı:

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

</body>

Kodu Çalıştır

Örnek:

<h1 style="background-color:orange;"> BAŞLIK </h1>

Kodu Çalıştır

Html Yazı Rengi (color)

Html ögelerinin rengini stil özelliği kullanarak belirlemek için color özelliği kullanılmaktadır.

Color Özelliği Kullanımı:

<h1 style="color:red;"> AZKOD BAŞLIK </h1>

Kodu Çalıştır

Örnek:

<p style="color:brown;"> AZKOD Paragraf</p>

Kodu Çalıştır

Html Yazı Tipi (font-family)

Html ögelerinin içinde bulunan yazıların tipini stil özelliği kullanarak belirlemek için font-family özelliği kullanılmaktadır.

Font-family Özelliği Kullanımı:

<p style="font-family:Comic Sans MS;"> AZKOD Yazı Tipi</p>

Kodu Çalıştır

Örnek:

<h1 style="font-family:Chiller;"> BAŞLIK </h1>

Kodu Çalıştır

Html Yazı Boyutu (font-size)

Html ögelerinin içinde bulunan yazıların boyutunu stil özelliği kullanarak belirlemek için font-size özelliği kullanılmaktadır.

Font-size Özelliği Kullanımı:

<p style="font-size:15;"> Paragraf </p>

Kodu Çalıştır

Örnek:

<b style="font-size:36;"> BAŞLIK </b>

Kodu Çalıştır

Html Yazı Hizalama (text-align)

Html ögelerinin içinde bulunan yazıların konumunu stil özelliği kullanarak belirlemek için text-align özelliği kullanılmaktadır.

Text-align Özelliği ile Yazıyı Ortalama:

<p style="text-align:center;"> Metin Ortalama </p>

Kodu Çalıştır

Text-align Özelliği ile Yazıyı Sağa Hizalama:

<p style="text-align:right;"> Metni Sağa Hizalama </p>

Kodu Çalıştır

Text-align Özelliği ile Yazıyı Sola Hizalama:

<p style="text-align:left;"> Metni Sola Hizalama </p>

Kodu Çalıştır

 

Önceki Ders: Html Renk Kodları Sonraki Ders: Html Formlar