Di HTML, Anda dapat membuat teks atau tulisan menjadi tebal (bold) menggunakan tag <b> dan <strong>. Kedua tag HTML ini digunakan untuk peranan yang berbeda. Tag <b> digunakan untuk menampilkan teks tebal yang tidak dimaksudkan untuk memberi penekanan penting dan lebih pada styling saja, sedangka tag <strong> digunakan untuk menampilkan teks tebal untuk menunjukkan informasi penting.
Sekarang, penggunaan tag <b> di HTML mulai ditinggalkan. Anda tidak dianjurkan lagi untuk menggunakan tag <b> untuk tujuan styling semata atau hanya ingin membuat teks menjadi tebal. Bila Anda ingin menunjukkan bahwa teks tersebut merupakan informasi yang penting, Anda dapat menggunakan tag <strong>. Untuk tujuan styling semata dengan membuat teks tebal, Anda dianjurkan untuk menggunakan property CSS font-weight.
font-weight adalah property CSS untuk menentukan tebal (boldness) dari teks. Namun, tebal yang bisa diberlakukan pada teks juga tergantung dari font-family yang digunakan untuk laman web. Terkadang, teks hanya bisa diatur dengan tebal normal atau bold saja. Adapun sintaksi property font-weight CSS adalah sebagai berikut:
font-weight: normal|bold|bolder|lighter|number|initial|inherit;
Dari sintaksis di atas, nilai (value) dari property font-weight adalah salah satu dari normal, bold, bolder, lighter, number, initial atau inherit. Bila Anda menentukan nilai property font-weight dengan number, Anda bisa menggunakan salah satu nilai dari 100, 200, 300, 400, 500, 600, 700, 800 atau 900. 400 sama dengan normal dan 700 sama dengan bold. initial mengatur property font-weight ke nilai default dan inherit mewarisi dari elemen atau tag di atasnya.
Contoh berikut ini menggunakan beberapa nilai dari proprty font-weight CSS. Anda dapat melihat perubahan tampilan teks untuk masing-masing nilai:
<!DOCTYPE html> <html> <head> <title>Membuat teks tebal (bold) dengan CSS</title> <style type="text/css"> .normal { font-weight: normal; } .bold { font-weight: bold; } .bolder { font-weight: bolder; } .lighter { font-weight: lighter; } .number100 { font-weight: 100; } .number200 { font-weight: 200; } .number300 { font-weight: 300; } .number400 { font-weight: 400; } .number500 { font-weight: 500; } .number600 { font-weight: 600; } .number700 { font-weight: 700; } .number800 { font-weight: 800; } .number900 { font-weight: 900; } </style> </head> <body> <h2>Property font-weight CSS</h2> <p class="normal">Teks ini diatur dengan font-weight: normal</p> <p class="bold">Teks ini diatur dengan font-weight: bold</p> <p class="bolder">Teks ini diatur dengan font-weight: bolder</p> <p class="lighter">Teks ini diatur dengan font-weight: lighter</p> <p class="number100">Teks ini diatur dengan font-weight: 100</p> <p class="number200">Teks ini diatur dengan font-weight: 200</p> <p class="number300">Teks ini diatur dengan font-weight: 300</p> <p class="number400">Teks ini diatur dengan font-weight: 400</p> <p class="number500">Teks ini diatur dengan font-weight: 500</p> <p class="number600">Teks ini diatur dengan font-weight: 600</p> <p class="number700">Teks ini diatur dengan font-weight: 700</p> <p class="number800">Teks ini diatur dengan font-weight: 800</p> <p class="number900">Teks ini diatur dengan font-weight: 900</p> </body> </html>
Berikut ini hasil tampilan (rendering) di web browser Mozilla Firefox:
