Mempelajari Selector Pada Pemrograman CSS - Part 6


Halo sobat lautan, semoga sehat selalu ya. 
Kali ini kita akan belajar mengenai pemrograman CSS. Ya, pemrograman yang ditujukan untuk memberikan gaya pada struktur HTML. 
Pada artikel sebelumnya, kita telah mempelajari Cascade, Inheritance, dan juga Specifity. Untuk dapat memahami apa makna dari Cascade, Inheritance, dan juga Specifity, anda dapat membacanya di sini


Nah, kali ini kita akan mempelajari tentang, CSS Typography. Ini akan menjadi pembahasan yang menarik, so simak baik-baik ya.

Typograhy adalah senu untuk mengatur huruf/teks agar mudah dibaca dan menarik secara kasat mata. Perlu diketahui bahwa, teks adalah elemen penting dalm dunia teknologi multimedia, tak terkecuali dengan website
Hampir 100% isi dari website memiliki komponen teks. Apalagi jika itu merupakan website informasi. Sebut saja menu navigasi, yang rata-rata terbentuk dari teks. 

Pembahasan mengenai CSS Typography sendiri cukup panjang. Lautan akan membahas 2 topik dahulu dari 21 topik CSS Typography. Yakni materi font-family dan font-size.

Maka dengan sebab itulah, pantengin terus lautan-it, agar anda dapat mempelajari sisa topik berikutnya.

Property font-family 

Property ini digunakan untuk mengatur jenis font yang akan digunakan. Nilai dari property ini adalah nama font yang akan digunakan. Agar lebih paham, cobalah perhatikan contoh dibawah ini

p {
   font-family : Arial;
}

Maksud dari contoh diatas adalah, semua jenis font akan diset menuju font Arial pada semua paragraf. Property ini akan mencari font didalam komputer client. Ini menunjukkan bahwa kode CSS diatas akan di tampilkan dengan font Arial apabila didalam komputer client memiliki font Arial. Jika tidak font Arial itu, maka web browser akan menentukan sendiri font yang akan digunakan.

Kita lanjut pada contoh kedua,

p {
   font-family : Arial, Helvetica, sans-serif;
}

Maksud dari kode CSS diatas adalah, gunakan font Arial untuk paragraf, dan apabila tidak ditemukan font Arial tersebut, maka gunakan font Helvetica. Apabila font Helvetica juga tidak ada, maka gunakan font generic dengan tipe sans-serif. Sebagai pengetahuan tambahan, CSS tidak membatasi seberapa banyak font alternatif yang bisa digunakan.

Mengenal generic font

Pada kode diatas tadi, kita akan menggunakan font generic dengan tipe sans-serif, apabila font jenis Arial dan Helvetica tidak ada. Timbul pertanyaan, apa sih font generic itu ?

Generic font berfungsi sebagai alternatif terakhir ketika font yang kita inginkan tidak tersedia
CSS menyediakan 5 jenis generic font, yakni :
  • Serif
  • Sans-serif
  • Monospace
  • Cursive
  • Fantasy

Generic font:serif

Serif adalah istillah untuk menyebut 'kaki' atau garis tambahan pada ujung setiap huruf. Contoh font yang termasuk dalam kategori ini adalah, Times New Roman, Georgia, Lucida Bright, Lucida Fax, Palatino, "Palatino Linotype", dan Palladio.
Font dengan jenis ini banyak digunakan untuk format media cetak, seperti buku atau kertas.

Generic font:sans-serif

Sans-serif adalah sebutan untuk font yang tidak memiliki kaki atau garis tambahan. 
Kata 'sans' berasal dari bahasa prancis yang memiliki makna 'tanpa', sehingga sans-serif adalah 'tanpa-serif'. Font dengan jenis banyak digunakan untuk format website dan media elektronik lainnya.

Generic font:monospace

Font jenis ini adalah tipe font khusus dimana lebar setiap karakternya sama panjang. Font jenis ini cocok digunakan untuk tulisan teknis yang membutuhkan ketelitian. Hampir semua teks editor programming menggunakan font monospace. Contohnya adalah Courier, Courier New, dan Andale Mono.


Generic font:cursive

Ini adalah jenis font yang meniru tulisan tangan atau kaligrafi. Biasanya digunakan untuk bagian judul, sub judul atau teks lain yang bukan bagian dari konten utama. Contoh dari font ini adalah, "Comis Sans", "Brush Script MT", "Lucida Caligraphy", dan "Lucida Handwriting"

Generic font:fantasy

Adalah jenis font yang bersifat visual dengan karakter font khusus seperti font disney, matrix, dan lain-lain. Font jenis ini, relatif jarang digunakan text utama, sama seperti cursive, font jenis ini hanya dipakai biasanya pada judul, sub judul, dan yang sejenisnya. Contoh dari font ini adalah, Papyrus, Herculanum, Party LET, Curle MT, dan Harrington.


Property font-size

Property font-size mengsetting beragam satuan untuk mengatur ukuran font. Contoh penggunaanya seperti dibawah ini :

p {
   font-size : 14px;
}

Maksud dari kode CSS diatas adalah, cari seluruh tag <p>, kemudian set ukuran font sebesar 14 pixel.

Satuan Length CSS

Semua property dalam CSS membutuhkan nilai dalam satuan length, yakni satuan 'panjang' seperti pixel, cm, mm, em, atau persen. Secara garis besar satuan length dikategorikan dalam dua bagian, yakni absolut dan relatif

Nilai absolut adalah satuan length yang nilainya tetap dan tidak terpengaruh oleh element disekelilingnya. Contohnya seperti pixel, centimeter, multimeter, point, inches, dan pica. 
Berikut adalah contoh penggunaan nilai absolut dalam property font-size

<html>
<head>
<title>Lautan-it</title>
<style>
p.mm { font-size: 7mm; }
p.cm { font-size: 1.2cm; }
p.pt { font-size: 10pt; }
p.in { font-size: 3in; }
p.pc { font-size: 2.1pc; }
</style>
</head>
<body>
<p class="mm">Lautan-it.com</p>
<p class="cm">Lautan-it.com</p>
<p class="pt>Lautan-it.com</p>
<p class="in">Lautan-it.com</p>
<p class="pc">Lautan-it.com</p>
</body>
</html>

Satuan Pixel 

Pixel merupakan nilai satuan yang juga termasuk kedalam absolute value. Secara teori, pixel merupakan satuan terkecil dari sebuah layar monitor. Jika kita punya resolusi layar sebesar 800 x 600, maka terdapat padanya 480.000 tiitk pixel dilayar tersebut. Untuk dapat menggunakan nilai pixel pada property font-size, cukup dengan menambahkan akhiran px:

p {
   font-size: 14px;
}

Selain nilai absolut, CSS juga menyediakan nilai relatif, seperti satuan persen, em dan rem.

Satuan Persen (%)

Persen, nilai relatif ini akan berubah tergantung posisi dan parent element. Contohnya:

{
   font-size: 120%;
}

Maksud kode CSS diatas adalah, cari seluruh tag <p>, kemudian set ukuran font sebesar 120% dari ukuran font-size parent element. Kita lanjut pada studi kasus dibawah ini :

<html>
<head>
<title>Lautan-it</title>
<style>
p.persen {
   font-size: 120%;
}
p.pixel {
   font-size: 19.2px;
}
</style>
</head>
<body>
<p>Lautan IT</p>
<p class="persen">Lautan-it dalam ukuran 120%</p>
<p class="pixel">Lautan-it dalam ukuran 19.2px</p>
</body>
</html>

Dalam kode diatas, tag <p> dengan class="persen" berada didalam tag <body>, sehingga tag <body> berperan sebagai parent element. Dengan kata lain, font size untuk tag <p> akan diset sebesar 120% dari font-size tag <body>.

Untuk ukuran font size tag <body>, nilainya adalah default style, yakni sebesar 16 pixel. Oleh karena itu, 120% * 16 pixel = 19.2 pixel.

Satuan Em

Em berasal dari istillah typography media cetak yang merujuk pada tinggi karakter 'm' pada suatu font. Dalam implementasinya dalam bahasa CSS, nilai em sangat mirip sekali penggunaannya dengan persen, dimana hasilnya juga dihitung berdasarkan nilai parent element

Nilai 1em sama dengan 100%, 2em sama dengan 200%. Berikut adalah contohnya

<html>
<head>
<title>Lautan-it</title>
<style>
 body { font-size: 20px }
p.persen120 {
   font-size: 120%;
}
p.persen80 {
   font-size: 80%;
}
p.em12 {
   font-size: 1.2em;
}
p.em08 {
   font-size: 0.8em;
}
</style>
</head>
<body>
<p>Paragraf normal 20 pixel</p>
<p class="persen120">Ukuran 120%</p>
<p class="em12">Ukuran 1.2em</p>
<p class="persen80">Ukuran 80%</p>
<p class="em08">Ukuran 0.8em</p>
</body>
</html>

Contoh diatas, bahwa font size tag <body> di set sebesar 20 pixel. Ini akan menjadi dasar perhitungan untuk menentukan nilai font-size persen dan em. Sebuah paragraf dengan font-size sebesar 1.2em akan ditampilkan sama besar dengan paragraf berukuran 120%, juga font-size 0.8em sama dengan 80%.

Satuan Rem

Rem merupakan singkatan dari 'root em'. Berbeda jauh dari em, yang bergantung pada parent element, rem bergantung pada 'root element' atau element akar. Dalam DOM, root element ini adalah tag <html>. 

Ketika kita men set ukuran font-size sebuah paragraf sebesar 1.2rem, artinya ukuran font-size tag <p> itu sebesar 120% dari ukuran font-size tag <html>, tidak peduli dimanapun paragraf itu berada. Berikut adalah contohnya : 

<html>
<head>
<title>Lautan-it</title>
<style>
html { font-size: 20px; }
body { font-size: 16px; }
div { font-size: 90%; }
p { font-size: 1rem; }
</style>
</head>
<body>
        Teks didalam body
<div> 
      Teks didalam body>div
      <p>
     Teks didalam body>div>paragraf
</p>
</div>
<p> Teks didalam body>paragraf
</p>
</body>
</html>

Berdasarkan pengertian suatu rem, kedua paragraf akan berukuran sebesar 20 pixel, yakni sesuai dengan ukuran font-size dari selector html. 

Selain satuan length, property memiliki nilai lain berupa kata atau keyword. Untuk property font-size, memiliki 9 nilai keyword, 7 untuk absolute dan 2 untuk relatif

Satuan 'keyword' absolut untuk property font-size adalah sebagai berikut :

  • xx-small
  • x-small
  • small
  • medium 
  • large
  • x-large
  • xx-large
Berikut adalah contoh penggunaanya :

<html>
<head>
<title>Lautan-it</title>
<style>
p.xx-large { font-size: xx-large; }
p.x-large { font-size: x-large; }
p.large { font-size: large; }
p.medium { font-size: medium; }
p.small { font-size: small; }
p.x-small { font-size: x-small; }
p.xx-small { font-size: xx-small; }
</style>
</head>
<body>
   <p>Paragraf normal</p>
<p class="xx-large">Berukuran xx-large</p>
<p class="x-large">Berukuran x-large</p>
<p class="large">Berukuran large</p>
<p class="medium">Berukuran medium</p>
<p class="small">Berukuran small</p>
<p class="x-small">Berukuran x-small</p>
<p class="xx-small">Berukuran xx-small</p>
</body>
</html>

Besar ukuran font ini diatur sepenuhnya oleh web browser. Ukuran font default web browser 16 pixel, sama dengan nilai medium, xx-small = 9 pixel, x-small = 10 pixel, small = 13 pixel, large = 18 pixel, x-large = 24 pixel, dan xx-large = 32 pixel.

Untuk satuan relatif, memiliki 2 nilai yakni smaller dan larger. Nilai smaller akan merubah sedikit memperkecil ukuran font, sedangkan larger akan merubah ukuran font sedikit lebih besar dari font-size parent element

Berikut adalah contoh penggunaannya :

<html>
<head>
<title>Lautan-it</title>
<style>
.larger { font-size: larger; }
.smaller { font-size: smaller; }
div { font-size: 20px; }
</style>
</head>
<body>
<p>Paragraf default</p>
<p class="larger">Paragraf larger</p>
<p class="smaller">Paragraf smaller</p>
<div>
<p>Div ukuran 20 pixel</p>
<p class="larger">Div > Paragraf larger</p>
<p class="smaller">Div > Paragraf smaller</p>
</div>
</body>
</html>

2 buah tag <p class="larger"> akan tampil berbeda dengan ukuran font-size yang berlainan. Di karenakan parent element masing-masing paragraf itu berbeda. Parent paragraf pertama adalah tag <body>, sedangkan parent element paragraf kedua adalah tag <div>.

Pada pembahasan berikutnya, kita akan membahas property color, dan juga font-weight. Jika memungkinkan, kita juga akan membahas font-style. Semoga bermanfaat ;D.

Post a Comment

0 Comments