Laman

Jumat, 28 Februari 2020

Cara Membuat Teks Tebal (Bold) Dengan CSS

Untuk tujuan styling membuat teks tebal, kita 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 halaman web. Terkadang, teks hanya bisa diatur dengan tebal normal atau bold saja. Adapun sintaks property font-weight CSS adalah sebagai berikut:

font-weight: normal|bold|bolder|lighter|number|initial|inherit;

Dari sintaks di atas, nilai (value) dari property font-weight adalah 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. Nilai 400 sama dengan normal dan 700 sama dengan bold. Nilai initial mengatur property font-weight ke nilai default dan inherit mewarisi dari elemen atau tag di atasnya.

Contoh berikut ini beberapa nilai dari property 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; }
   .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="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>

Kursus LPIA:


Segera bergabung : - kursus bahasa Inggris - kursus komputer dengan: Lembaga Pendidikan Indonesia Amerika ( LPIA ); Alamat LPIA Margonda Jl. Margonda Raya, No.91C (dekat lampu merah flyover pertigaan Arief Rahman Hakim atau depan Autopart Ramanda Depok, sebelah Solite Furniture dan ATTIN TOUR); Kelurahan: Pancoran Mas; Kecamatan : Pancoran Mas; Kota: Depok; Po Box: 16431; Telepon LPIA Depok : (021) 7774443

Tidak ada komentar:

Posting Komentar