Mempelajari Selector Pada Pemrograman CSS - Part 8


Halo sobat lautan, semoga sehat selalu ya.
Kembali lagi bersama lautan ya. Kali ini, kita akan membahas tentang pemrograman website, yakni CSS. Sebelumnya kita telah membahas tentang property color dalam CSS Typography. 21 topik yang ada didalamnya, dan kita telah membahasnya 3 topik. 


Untuk topik yang keempat kita akan mempelajari tentang property font-weight. Apa sih itu property font weight ?. Property ini digunakan untuk menebalkan teks (bold) dengan nilai untuk property bisa berupa angka seperti 100, 200, 300, 400, 500, 600, 700, 800, 900 atau keyword berupa kata normal, bold, bolder. dan lighter

Nilai angka 100 s/d 900 melambangkan tingkat ketebalan huruf, dan berada di urutan yang paling tipis adalah 100, dan 900 adalah yang paling tebal. Namun perlu dicatat, kebanyakan font saat ini tidak mendukung tingkat ketebalan dari 100 s/d 900. Hanya bisa memuat teks normal dan bold saja.

Contoh skrip penggunaan :

<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
.bold100 { font-weight: 100; }
.bold200 { font-weight: 200; }
.bold300 { font-weight: 300; }
.bold400 { font-weight: 400; }
.bold500 { font-weight: 500; }
.bold600 { font-weight: 600; }
.bold700 { font-weight: 700; }
.bold800 { font-weight: 800; }
.bold900 { font-weight: 900; }
</style>
</head>
<body>
<p class="bold100">Teks dengan font-weight: 100</p>
<p class="bold200">Teks dengan font-weight: 200</p>
<p class="bold300">Teks dengan font-weight: 300</p>
<p class="bold400">Teks dengan font-weight: 400</p>
<p class="bold500">Teks dengan font-weight: 500</p>
<p class="bold600">Teks dengan font-weight: 600</p>
<p class="bold700">Teks dengan font-weight: 700</p>
<p class="bold800">Teks dengan font-weight: 800</p>
<p class="bold900">Teks dengan font-weight: 900</p>
</body>
</html>

Bila melihat hasilnya, maka yang akan terlihat adalah teks normal (100-500) dan tebal (600-900). Hal ini dikarenakan font web browser tidak mendukung untuk format perbedaan ini. Untuk penggunaan yang lebih efektif kita dapat menggunakannya seperti di bawah ini

p {
font-weight: bold;
}

CSS juga dapat menjadikan teks tebal dengan ukuran normal, dengan nilai normal untuk font-weight. 

Contoh skrip penggunaan :

<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
h1.normal { font-weight: normal; }
p { font-weight: bold; }
</style>
</head>
<body>
<h1>Header h1 akan ditampilkan dengan teks tebal (default)</h1>
<h1 class="normal">Header h1 dengan font-weight: normal</h1>
<p>Paragraf ini akan ditampilkan dengan huruf tebal</p>
</body>
</html>

Lihat lah hasilnya yang pastinya berbeda.

Nilai terakhir untuk font-weight adalah lighter dan bolder Keduanya merupakan nilai relatif yang akan menipiskan dan menebalkan teks bergantung dari font-weight parent element. Contonya, jika ada sebuah paragraf dengan nilai font-weight : 500, maka child element dengan nilai font-weight: lighter akan men-set nilainya menjadi 100, sedangkan child element dengan nilai font-weight: bolder, akan men-set nilainya menjadi 700

Contoh skrip penggunaan :

<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
p { font-weight: 400; }
.tipis { font-weight: lighter; }
.tebal { font-weight: bolder; }
</style>
</head>
<body>
<p><span class="tebal">Typography</span> adalah sebuah seni mengatur huruf/\
teks untuk membuatnya
mudah dibaca dan lebih menarik <span class="tipis"></span>secara visual.</p>
</body>
</html>

Efek yang dihasilkan oleh lighter, tidak akan berpengaruh sama sekali, sedangkan bolder akan mengakibatkan teks tampil dengan huruf tebal. Semoega pelajaran ini bermanfaat :)

Post a Comment

0 Comments