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 !


Jangan Lupa Share !!!

32
1 komentar, 6 shares, 32 points

Apa Reaksimu ?

Bingung Bingung
2
Bingung
Kesal Kesal
10
Kesal
OMG OMG
2
OMG
Takut Takut
1
Takut
Keren Keren
9
Keren
Sedih Sedih
4
Sedih
Posciety Tech

Advanced Competent

Official Channel Posciety.Com yang menyuguhkan informasi dan updates seputar dunia teknologi. Dikelola oleh tim Posciety Tech.

1 Komentar

Pilih Format
Artikel
Default, Membuat Artikel/Cerita
List
Listicle, Misalnya: 3 Hal yang Wajib Dilakukan Saat...
Kuis Kepribadian
Membuat kuis Tentang Kepribadian
Poll
Vote untuk Membuat Keputusan atau Mencari Saran
Meme
Membuat Meme dari Gambar Normal yang Kamu Miliki