CSS ile yazıları biçimlendirebilmek için font ve text özelliklerini inceleyeceğiz.

Font ile ilgili kodlar: font-family, font-weight, font-size, font-style, font-variant

Text ile ilgili kodlar: text-align, text-decoration, text-transform, text-indent, word-spacing, letter-spacing, line-height

1. Font

font-family: Yazının fontunu belirler. Örn: Tahoma, Arial, Verdana, Trebuchet MS, Georgia

• font-family: Arial

font-weight: Harflerin genişliğini belirler. Aldığı değerler: lighter, bold, normal

• font-weight: lighter

  Bu kodu kullandığınızda harflerin tamamı ince olur.

• font-weight: bold;

  Bu kodu kullandığınızda harflerin tamamı kalın olur.

• font-weight: normal;

  Bu kodu kullandığınızda harfler normal kalınlığında görülür. Eğer siz yazının olduğu bölüme başka bir kod ile kalın olma özelliği verdiyseniz yazı kalın, ince özelliği verdiyseniz ince görünür. Kalın olma özelliği verdiyseniz ve ince görünsün istiyorsanız lighter değerini kullanmalısınız.

font-size: Yazının büyüklüğünü belirler.

• font-size: 11px;

font-style: Yazının eğimli ya da normal olacağını belirler. Aldığı değerler: normal, italic, oblique

• font-style: normal;

  Bu kodu kullanırsanız yazı daha önceden nasıl belirlenmişse öyle görünür.

• font-style: italic;

  Yazının italik görünmesini sağlar.

• font-style: oblique;

  Yazının eğik görünmesini sağlar. italic ile aynı işlevi görür diyebiliriz.

font-variant: Bu kod ile yazıyı normal ya da tamamı büyük şekilde yazabilirsiniz. Aldığı değerler: normal, small-caps

• font-variant: normal;

  Bu kod normalde nasıl belirlenmişse öyle görünmesini sağlar.

• font-variant: small-caps;

  Bu kod yazının tamamının büyük harfle yazılmasını sağlar.
  Örnek:

  <div style="font-variant: small-caps; font-size: 14px;">bu yazıda small-caps değeri kullanılmıştır.</div>

  bu yazıda small-caps değeri kullanılmıştır.

2. Text

text-align: Yazıyı belirlediğiniz hizaya sokar. Aldığı değerler: left, right, center, justify

• text-align: center;

  Yazıyı ortaya hizalar.

• text-align: left;

  Yazıyı sola hizalar.

• text-align: right;

  Yazıyı sağa hizalar.

• text-align: justify;

  Yazıyı kalıba sokar. Normalde sağda olan girinti çıkıntıları hizalar.

text-decoration: Altı çizili, üstü çizili, ortası çizili, yanıp sönen yazılar yazabilmenizi sağlar: Aldığı değerer: underline, overline, blink, line-through, none

• text-decoration: underline;

  Yazıyı altı çizili gösterir.

• text-decoration: overline;

  Yazıyı üstü çizili gösterir.

• text-decoration: blink;

  Yazının yanıp sönmesini sağlar. Her tarayıcı bu kodu desteklemeyebilir.

• text-decoration: line-through;

  Yazının ortasının çizili görünmesini sağlar.

text-transform: Yazıda kelimelerin baş harfini büyük, tamamını küçük ya da tamamını büyük gösterebilmenizi sağlar. Aldığı değerler: capitalize, uppercase, lowercase, none

• text-transform: capitalize;

  Kelimelerin baş harflerinin büyük görünmesini sağlar.

• text-transform: uppercase;

  Tüm harflerin büyük görünmesini sağlar.

• text-transform: lowercase;

  Tüm harflerin küçük görünmesini sağlar.

text-indent: Paragrafların girintilerini ayarlar.

• text-indent: 2ex;

word-spacing: Kelimeler arasındaki boşlukları ayarlar. Örn: 1ex, 1.5ex

• word-spacing: 3ex

letter-spacing: Harfler arasındaki boşlukları ayarlar. Örn: 0.3ex, 0.75ex

• letter-spacing: 0.5ex;

line-height: Satırlar arasındaki boşlukları ayarlar. Örn: %50, %100, 0.7ex

• line-height: %80;