Cara Membuat Huruf Tebal dan Huruf Miring Dengan CSS

mengenal property font-weight dan font-style

jika teman-teman perhatikan pada website-website yang teman-teman kunjungin, pasti teman-teman sering melihat website yang menggunakan font(huruf) tebal dan miring, biasanya huruf tebal dan miring digunakan untuk memberi penjelasan dan penekanan dalama sebuah kata atau kalimat pada conten website. Pada kesempatan kali ini Point Website akan memberikan tutorial cara Membuat Huruf Tebal dan Huruf Miring dengan CSS. Untuk lebih jelas mari kita lihat penjelasan dibawah ini.

Cara Memiringkan Huruf Dengan CSS

Huruf miring sering digunakan dalam sebuah web, dimana huruf ini digunakan untuk tujuan tertentu biasanya digunakan untuk menandai kalimat atau kata penting di dalam konten. Untuk menggunkan style atau gaya Font ini kita dapat menggunakan property font-style. property font-style ini memiliki 3 nilai yaitu: normal, italic, dan oblique. Pada dasarnya untuk menggunakan huruf miring kita dapat menggunakan italic atau oblique, kedua value(nilai) dari property font-style ini sama-sam berfungsi untuk memiringkan huruf, namun ada sedikit perbedaan dari kedua value tersebut, dimana font-style: italic akan menggunakan format font terpisah yang bertipe italic, sedangkan font-style: oblique hanya akan memiringkan font yang ada beberapa derajat dan jika teman-teman ingin mengembalikan huruf ke bentuk semula(default) teman-teman dapat menggunakan value normal.

Cara Membuat Huruf Tebal Dengan CSS

Dalam membuat font HTML menjadi tebal, teman-teman dapat menggunakan property font-weight dimana property ini berfungsi menebalkan huruf atau font, property ini memiliki value yang beragam diantaranya: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 dan 900. Semua value diatas memiliki tingkat ketebalan yang berbeda-beda, dimulai dari yang paling kecil 100 dan yang paling besar 900, Jika teman-teman ingin membuat huruf menjadi tebal tanpa mempedulikan tingkat ketebalannya, teman-teman dapat menggunaka font-weight: bold. Dari berbagai macam value diatas teman-teman dapat menggunakan sesuai keinginan dan kebutuhan. Untuk menghapus atau mengembalikan text ke bentuk semula(default) teman-teman dapat menggunakan value normal perintahnya sebagai berikut: font-weight : normal.

Untuk lebih jelas mari kita buat contoh untuk penerapannya, silahkan teman-teman tulis code dibawah ini dan simpan dengan nama file sesuai dengan yang teman-teman inginkan.

<!DOCTYPE html>
<html>
<head>
 <title>Point Website</title>
<style type="text/css">
 .box {
  width:  500px;
  margin: auto;
 }
 p.satu {
  font-style: oblique;
  font-weight: bold;
  color: blue;
 }

 p.dua {
  font-style: italic;
  font-weight: 600;
  color: red;
 }
</style>
</head>
<body>
<div class="box">
<p class="satu">Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>

<p class="dua">consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>

jika teman-teman jalankan maka hasilnya akan seperti berikut ini:

sedikit penjelasan dari code diatas, jika teman-teman perhatikan pada code CSS diatas, saya mengunakan value oblique untuk memiringkan huruf pada paragraf pertama, memberikan ketebalan huruf dengan value bold dan memberikan warna pada huruf dengan value blue. Sedangkan pada paragraf kedua saya memiringkan huruf dengan value italic, memberikan ketebalan dengan value 600 dan memberikan warna dengan property color dengan value red. Untuk lebih mengenal semua value dari masing-masing property diatas, silahkan teman-teman ganti value dari code diatas dengan value yang sudah saya jelaskan dari masing-masing property tersebut. Sekian tutorial dari Point Website, semoga dapat membantu teman-teman dalam membuat dan mempelajari website.