CSS Font dan Text

Properti Font berfungsi untuk mengatur font pada suatu elemen HTML, baik itu jenisnya,ukurannya,gayanya ataupun variasinya.
Ada beberapa macam properti Font antara lain:

Tutorial

• Font, untuk mengatur secara keseluruhan nilai-nilai yang digunakan pada suatu elemen.
  contoh:

p { font:bold 20px Arial, Helvetica sans-serif ;}

• Font-family, untuk mengatur model/jenis font pada suatu elemen.
  contoh:

p { font-family:”Verdana” Arial Helvetica sans-serif ;}

• Font-size, untuk mengatur ukuran font pada suatu elemen. Nilainya dapat berupa satuan unit, persentase, ataupun inherit, xx-small, x-small, small, smaller, xx-large, x-large, large, larger dan medium.
  contoh:

p { font-size:xx-large ;}

• Font-style, untuk mengatur model/gaya font pada suatu elemen. Nilainya dapat berupa inherit, italic, normal dan oblique.
  contoh:

p { font-style:italic ;}

• Font-weight, untuk mengatur tebal/tipis font pada suatu elemen. Nilainya dapat berupa bold, normal, inherit, bolder, lighter, ataupun satuan angka dari 100-900.
  contoh:

p { font-weight:bold;}

Properti Text berfungsi untuk mengatur gaya atau style teks pada suatu elemen.
Ada beberapa macam properti Text antara lain:

• Text-align, untuk menentukan perataan teks pada suatu elemen.Nilainya dapat berupa left,center dan right.
  contoh:

p {text-align:left;}

• Text-transform, untuk merubah teks menjadi huruf besar atau kecil pada suatu elemen. Nilainya dapat berupa uppercase, lowercase, capitalize dan none.
  contoh:

p {text-transform:uppercase;}

• Text-indent, untuk mengatur jarak masuk teks pertama pada paragraf pada suatu elemen. Nilainya dapat berupa inherit atau satuan unit.
  contoh:

p {text-indent:4px;}

• Line-height, untuk mengatur jarak baris antar teks pada suatu elemen. Nilainya dapat berupa persentase atau satuan unit.
  contoh:

p {line-height:14px;}

• Letter-spacing, untuk mengatur jarak spasi antar teks pada suatu elemen. Nilainya dapat berupa inherit, normal, persentase atau satuan unit.
  contoh:

p {letter-spacing:1px;}

• Text-decoration, untuk menentukan dekorasi teks pada suatu elemen. Nilainya dapat berupa underline, line-through, overline, blink dan none.
  contoh:

p {text-decoration:underline;}