Membuat Huruf Tebal dengan CSS

1

Sebelumnya, kita sudah membahas mengenai huruf tebal di file HTML, sekarang kita simak bagaimana penjelasan huruf tebal menggunakan CSS. Apa perbedaannya? Silakan bandingkan di sini.

Pada CSS tentu kita perlu membuat property yang membuat huruf bersangkutan menjadi tebal, mau menggunakan CSS atau HTML hasilnya sama saja hanya caranya berbeda. Penggunaan ini tergantung selera kita semua, property apa yang digunakan pada CSS untuk membuat huruf tebal?

Misalnya saya punya tulisan didalam tag p dan akan saya tebalkan keseluruhan text / tulisan tersebut. Maka CSS nya seperti ini:

ads by posciety

p {
     font-weight: bold;
}

Dengan CSS seperti itu artinya semua tulisan yang ada di tag p akan menjadi tebal.

Bagaimana kalo mau sebagian huruf saja yang ditebalkan pada tag p itu ?

Caranya kalian bisa menggunakan tips sebelumnya yaitu membuat huruf tebal menggunakan HTML. Tapi kalo mau menggunakan CSS juga bisa, kita harus kasih tag / element lagi untuk membungkus tulisan yang akan di tebalkan misalnya kita masukkan class atau id . Nah, nanti kita panggil class dan id tersebut di CSS untuk menebalkan tulisan yang didalamnya. Contoh nya seperti ini:

<p> ini contoh <span class="tebal">yang akan ditebalkan</span> menggunakan CSS</p>

Diatas ini saya contohkan pakai class, kalian bisa gunakan hal lain seperti id misalnya. Dan nama class / id nya bebas, asal nanti ketika di panggil di CSS nya harus sama / sesuai jangan salah tulis. Contoh, seperti ini:

.tebal {
	font-weight: bold;
}

Disitu saya tulis .tebal karena saya memanggil class="tebal" yang tadi di HTML, kalo nama class kalian class="apaaja" maka kalian manggil di CSS nya juga jadi .apaaja {}.

Masih bingung? Lihat : Video Tutorial Cara Membuat Huruf Tebal CSS.

Hasilnya huruf yang tebal hanya yang ada didalam , kenapa ? Karena <span>nya sudah di kasih class dan classnya kita atur di CSS menjadi huruf tebal, maka artinya setiap tulisan yang ada didalam class tersebut akan menjadi tebal.

Artikel Lainnya
Lihat Komentar (1)

Website ini menggunakan cookie untuk pengalaman yang lebih baik Setuju & Tutup Selengkapnya