HTML Stiller
Sizlere bu konumuzda "Style (Stil)"özelliğini temel olarak anlatmaya çalıştım.

HTML Stil (Style) Nedir?
Bu konumuzda stil yani "style" özelliğini öğreneceğiz. Peki bu özellik ile neler yapabiliriz?
Style (stil) özelliği bir öğeye renk, yazı tipi, boyut vb. gibi stilleri eklemek için kullanılır.
<style> şeklinde kullanılan bu özelliğin detaylarına gelin birlikte bakalım ve kavramaya çalışalım.
Bu özelliğimiz şu şekilde bir sözdizimine sahiptir:
<etiketismi style="özellik:değer;">
Hadi <style> özelliğini kullanarak öğelerimiz üzerine yeni stiller ekleyelim.
**background-color: Bu özellik ile HTML öğesinin arka plan rengini ayarlarız.
<body style="background-color:red;">
<h1>Bu bir başlık etiketidir.</h1>
<p>Bu bir paragraf etiketidir.</p>
</body>
Örneği canlı görüntülemek ve düzenlemek için, buraya tıklayabilirsiniz.
**Üstteki örneğimizde komple arka planın rengini değiştirmiştik gelin şimdi bir örnek daha yapalım ve bu örneğimizde sadece öğelere arka plan rengi tanımlayalım.
<body>
<h1 style="background-color:blue;">Bu bir başlık etiketidir.</h1>
<p style="background-color:green;">Bu bir paragraf etiketidir.</p>
</body>
Örneği canlı görüntülemek ve düzenlemek için, buraya tıklayabilirsiniz.
**Şimdi de color özelliğini kullanalım ve öğelerimizin renklerini değiştirelim.
<h1 style="color:blue;">Bu bir başlık etiketidir.</h1>
<p style="color:red;">Bu bir paragraf etiketidir.</p>
Örneği canlı görüntülemek ve düzenlemek için, buraya tıklayabilirsiniz.
**font-family özelliği ile öğelerimizin yazı tiplerini ayarlayabiliriz.
<h1 style="font-family:verdana;">Bu bir başlık etiketidir.</h1>
<p style="font-family:courier;">Bu bir paragraf etiketidir.</p>
Örneği canlı görüntülemek ve düzenlemek için, buraya tıklayabilirsiniz.
**font-size özelliği ile öğelerimizin yazı boyutlarını ayarlayabiliriz.
<h1 style="font-size:300%;">Bu bir başlık etiketidir.</h1>
<p style="font-size:160%;">Bu bir paragraf etiketidir.</p>
Örneği canlı görüntülemek ve düzenlemek için, buraya tıklayabilirsiniz.
**text-align özelliği ile öğelerimizin yatay metin hizalamasını yapabilirsiniz.
<h1 style="text-align:center;">Bu bir başlık etiketidir.</h1>
<p style="text-align:center;">Bu bir paragraf etiketidir.</p>
Örneği canlı görüntülemek ve düzenlemek için, buraya tıklayabilirsiniz.
NOT: Bu konumuzda ele aldığımız stil özellikleri tamamen temel yapılardır. İlerleyen derslerimizdeki yeni konularda stil özelliğini kullanmak zorunda kalacağım için, sizlere basitçe stil özelliğinin temel kavramlarını anlatmak istedim. Bu özelliğin tüm detaylarını CSS bölümümüzde detaylı olarak öğreneceğiz.
Tepkiniz Nedir?






