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:

  • 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;}

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *