Belajar | Format Font HTML

Di tutorial HTML ini kita akan melupakan tag dan beralih menggunakan atribut style. Untuk mengganti jenis font digunakan properti font-family:

<p style="font-family:Georgia">Tulisan dengan font-family Georgia</p>

Hasil:

Tulisan dengan font-family Georgia

Untuk membuat tulisan miring digunakan properti font-style:

<p style="font-style:italic">Membuat tulisan miring</p>

Hasil:

Membuat tulisan miring

Untuk membuat tulisan tebal digunakan properti font-weight:

<p style="font-weight:bold">Membuat tulisan tebal</p>

Hasil:

Membuat tulisan tebal

Untuk mengatur ukuran font digunakan properti font-size:

<p style="font-size:16px">Tulisan dengan ukuran font 16px</p>

Hasil:

Tulisan dengan ukuran font 16px

Untuk pengaturan ukuran font-size dapat menggunakan satuan px, em, % atau pt. Kode HTML berikut akan menghasilkan ukuran font yang sama.

<p style="font-size:16px">Tulisan dengan ukuran 16px</p>
<p style="font-size:100%">Tulisan dengan ukuran 100%</p>
<p style="font-size:1em">Tulisan dengan ukuran 1em</p>
<p style="font-size:12pt">Tulisan dengan ukuran 12pt</p>

Hasil:

Tulisan dengan ukuran 16px

Tulisan dengan ukuran 100%

Tulisan dengan ukuran 1em

Tulisan dengan ukuran 12pt

Untuk membuat warna font digunakan properti color:

<p style="color:blue">Tulisan ini akan berwarna biru</p>

Hasil:

Tulisan ini akan berwarna biru

Untuk kode warna bisa menggunakan nilai RGB, Hexadecimal atau Nama Warna. Kode HTML berikut akan menghasilkan warna tulisan yang sama.

<p style="color:rgb(0,128,0)">Membuat warna tulisan dengan Nilai RGB</p>
<p style="color:#008000">Membuat warna tulisan dengan Kode Hexadecimal</p>
<p style="color:green">Membuat warna tulisan dengan Nama Warna</p>

Hasil:

Membuat warna tulisan dengan Nilai RGB

Membuat warna tulisan dengan Kode Hexadecimal

Membuat warna tulisan dengan Nama Warna

Atribut style dapat memiliki beberapa properti dengan dibatasi oleh tanda titik koma.

<p style="font-family:Georgia;font-size:16px;font-weight:bold;">Contoh tulisan dengan font-family, font-size dan font-weight</p>

Hasil:

Contoh tulisan dengan font-family, font-size dan font-weight

Kemudian style tersebut diatas dapat di persingkat dengan menggunakan properti font.

<p style="font:bold 16px Georgia">Contoh tulisan dengan properti font.</p>

Hasil:

Contoh tulisan dengan properti font.

source