Membuat teks atau tulisan tebal (bold) dengan CSS

Di HTML, Anda dapat membuat teks atau tulisan menjadi tebal (bold) dengan menggunakan tag <b> dan <strong>. Kedua tag HTML ini digunakan dengan peranan berbeda. Tag <b> digunakan untuk menampilkan teks tebal yang tidak dimaksudkan untuk memberi penekanan penting dan lebih pada styling, sedangka tag <strong> digunakan untuk menampilkan teks tebal untuk menunjukkan informasi penting.

Sekarang, penggunaan tag <b> mulai ditinggalkan. Anda tidak dianjurkan 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.

Baca artikel Cara Membuat Teks Tebal (Bold) Dengan HTML

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.

Artikel menarik lainnya:

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:

Membuat teks atau tulisan tebal (bold) dengan CSS

SUKAI DAN BAGIKAN ARTIKEL INI:
Pin It