Membuat Huruf Tebal Dengan CSS

Sebelumnya sudah saya buatkan posting mengenai huruf tebal di file HTML (langsung), sekarang saya akan menjelaskan menggunakan CSS. Apa perbedaannya ? Silahkan bandingkan disini.

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:

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.

Selamat mencoba !

tunggu sebentar...

POS Lainnya:

1
Tinggalkan Komentar

avatar
Bima Saputra
Visitor
Bima Saputra

Terimakasi tutorialnya

Situs ini menggunakan Cookie untuk meningkatkan pengalaman setiap pengunjung SETUJU & TUTUP Lihat Privasi