Setelah mempelajari Tutorial CSS dasar 4 dari CSS pada tutorial sebelumnya, dalam tutorial CSS kali ini kita akanlanjut mempelajari Tutorial CSS dasar 5 itu sendiri.
Didalam desain web, CSS mendukung hingga 16.777.216 kombinasi warna. Warna ini berasal dari perpaduan warna merah, hijau dan biru tersebut. Masing-masing warna dasar ini dapat bernilai 0 sampai 255, dimana 0 adalah tanpa warna, 255 adalah warna maksimal. Dalam dunia ilmu komputer, kombinasi warna ini dikenal dengan 24bit warna, atau disebut juga true color. Perpaduan ketiga warna ini akan memberi kita 256 kombinasi merah x 256 kombinasi hijau x 256 kombinasi biru = 16.777.216 kombinasi warna.
Misalkan, untuk mendapatkan warna kuning, sebenarnya warna kuning adalah perpaduan warna merah dan hijau. Untuk mendapatkan warna kuning terang, maka kita harus mencampurkan merah sebanyak 255, hijau sebanyak 255, dan biru sebanyak 0.
Contohnya, #FF0000 adalah warna merah ‘murni’, #00FF00 adalah warna hijau murni, sedangkan #777777 adalah kode untuk warna silver.
Selain tabel warna standar di atas, beberapa modern web browser juga mendukung keyword warna yang disebut 147 SVG colors (atau X11 colors). List lengkap untuk keyword warna tambahan ini dapat dilihat di : https://developer.mozilla.org/en-US/docs/CSS/color_value.
Sebagai contoh penggunaan kode warna diatas, saya akan menampilkannya dalam file warna.html sebagai berikut:
Seperti yang terlihat dari kode HTML di atas, setiap kalimat diset
menggunakan kode warna yang berbeda-beda. Yang menjadi menarik, nilai transparent yang diberikan kepada selector class=”lima” menjadi tidak terlihat, dan hanya terlihat jika di blok.
Selain kode warna, property dari CSS dapat bernilai seperti pixel, point, maupun persen.
Dalam merancang halaman web, kadang ada saatnya kita membutuhkan fleksibilitas dalam menentukan nilai atau value tertentu untuk suatu properti, seperti tinggi sebuah box, besar ukuran font maupun besar border dari tabel. Untuk keperluan ini, CSS menyediakan berbagai ukuran seperti pixel, em, point, in, pc, dan pt.
Sebuah nilai dalam CSS dapat bernilai positif maupun negatif, bisa berupa angka bulat, maupun angka desimal. Namun beberapa properti juga memiliki batasan, seperti warna yang hanya bisa bernilai 0-255 atau 0 sampai dengan FF.
Kelima nilai absolut ini berasal dari media percetakan. Kita tentunya sudah familiar dengan ukuran seperti milimeter, dan centimeter. Sedangkan 1 inchi adalah sekitar 25,4 mm.
Ukuran point (pt) sering digunakan dalam media cetak offline seperti Microsoft word dalam menentukan ukuran dari font. 1 inchi setara dengan 72pt, sehingga ukuran font normal sebesar 12pt setara dengan seperdelapan inchi. Contoh penggunaannya dalam CSS: p {font-size: 18pt;} sama dengan p {fontsize: 0.25in;}.
Ukuran pica (pc) mungkin tidak terlalu familiar. 1pc setara dengan 12pt. contoh penulisannya dalam CSS adalah p {font-size: 1.5pc;}.
Kelima nilai absolut tersebut, selain pt tidak terlalu sering digunakan, karena konversi dari ukuran dunia nyata ke dalam monitor dipengaruhi banyak hal, 1cm di satu monitor bisa jadi berbeda dengan 1cm pada monitor lainnya, sehinga agak menyulitkan dalam mendesain kode CSS yang “pas”.
Ukuran pixel (px), merupakan ukuran yang paling sering digunakan dalam CSS. Di dalam CSS, pixel termasuk nilai relatif karena ia tidak terikat dengan perbandingan media tertentu. Didalam spesifikasi CSS2. 1, 1 pixel disamakan dengan 0.26mm atau 1/96 inci, namun banyak browser yang mengabaikan spesifikasi ini dan menyamakan 1 pixel dengan 1 pixel sesungguhnya yang terdapat di monitor.
1 unit Em-height (em) sama dengan besar ukuran asal yang diturunkan tag tersebut. Ketika kita mendefenisikan sebuah paragraf sebesar 12pt, maka sebuah tag <em> yang berada di dalam paragraf tersebut disebut secara inheritance akan berukuran 1em. Jika kita merubahnya menjadi em {font-size: 1.2em;} maka tag <em> tersebut akan berukuran 1,2 kali lebih besar dari ukuran tag p.
Ukuran relatif terakhir yaitu X-height (ex). ex berasal dari tinggi sebuah karakter “x” (huruf x kecil) dari sebuah font. Namun, banyak font yang tidak mendukung hal ini, sehingga browser kadang kala menyamakan 1ex dengan 0,5em.
Dengan membuat nilai font lainnya menjadi persen, hal ini akan memudahkan jika suatu saat kita ingin merubah seluruh tampilan web. Hanya merubah ukuran tag <p>, maka secara langsung tag <em> akan menyesuaikan tampilannya.
Berikut adalah contoh perbandingan_fontsize.html, dimana saya menampilkan ukuran property font-size dengn berbagai value:
jika diperhatikan lagi, saya membuat sebuah selector body {font-size:14pt;} pada bagian awal definisi CSS. Selector body akan menurunkan (inherit) ukuran font ini ke seluruh tag <p> yang berada di dalam tag <body>, namun pada masing-masing tag <p>, saya menambahkan property HTML “class”, sehingga ukuran font akan ditimpa (override) oleh nilai lainnya.
Khusus untuk class=lima, class=enam, dan class=tujuh, saya menggunakan nilai relatif em, ex, dan %, sehingga nilainya bergantung dengan nilai induknya (parent), yakni body {font-size:14pt;}. Cobalah mengubah ukuran font-size pada body ini, lalu jalankan kembali perbandingan_fontsize.html, maka secara otomatis ketiga kalimat tersebut juga akan berubah ukurannya.Mengenal Model Warna RGB
Dalam desain di media visual seperti televisi maupun monitor komputer, model warna yang digunakan adalah model warna RGB (Red Green Blue). Disebut RGB, karena warna merah, hijau dan biru inilah dasar dari warna lainnya. Warna seperti kuning, coklat, pink, hitam dan putih berasal dari perpaduan ketiga warna ini.Didalam desain web, CSS mendukung hingga 16.777.216 kombinasi warna. Warna ini berasal dari perpaduan warna merah, hijau dan biru tersebut. Masing-masing warna dasar ini dapat bernilai 0 sampai 255, dimana 0 adalah tanpa warna, 255 adalah warna maksimal. Dalam dunia ilmu komputer, kombinasi warna ini dikenal dengan 24bit warna, atau disebut juga true color. Perpaduan ketiga warna ini akan memberi kita 256 kombinasi merah x 256 kombinasi hijau x 256 kombinasi biru = 16.777.216 kombinasi warna.
Misalkan, untuk mendapatkan warna kuning, sebenarnya warna kuning adalah perpaduan warna merah dan hijau. Untuk mendapatkan warna kuning terang, maka kita harus mencampurkan merah sebanyak 255, hijau sebanyak 255, dan biru sebanyak 0.
Format #RRGGBB
Format penulisan warna #RRGGBB adalah yang paling populer digunakan untuk CSS. Dimana RR adalah nilai untuk warna merah, GG untuk hijau, dan BB untuk warna biru. Masing-masing nilai ini berisi angka 00 sampai dengan FF. Kenapa FF? Karena CSS menggunakan angka hexadesimal. FF adalah nilai maksimal, equivalen dengan 255 dalam nilai desimalContohnya, #FF0000 adalah warna merah ‘murni’, #00FF00 adalah warna hijau murni, sedangkan #777777 adalah kode untuk warna silver.
Format #RGB
Selain menggunakan format warna 6 digit, CSS juga mendukung penulisan 3 digit. Format penulisan 3 digit ini merupakan penulisan singkat dari 6 digit. Contohnya #RGB merupakan penulisan singkat dari #RRGGBB, #F0F adalah singkatan dari #FF00FF, #09A sama dengan #0099AA (merah=00, hijau=99, biru=AA).Penulisan Desimal
Selain penulisan hexadesimal, CSS juga menyediakan penulisan warna menggunakan angka desimal. Format penulisannya adalah: rgb(0, 160, 255) atau rgb(0%, 63%, 100%), dimana urutan warna adalah merah, hijau, dan biru. Menggunakan format pertama, 255 sama dengan 100%. Jika kita menuliskan nilai diluar dari angka yang seharusnya, yakni 0 – 255 atau 0% – 100% maka CSS secara otomatis akan menyamakannya dengan nilai yang terdekat. Format penulisan warna seperti ini tidak terlalu sering digunakan.Kata Warna (Keyword)
Selain menggunakan kode warna dengan format RGB, CSS juga mendukung 17 kata warna dalam bahasa inggris, yakni: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, dan yellow. Kata-kata ini berasal dari warna dasar VGA pada Windows dan dikenal juga dengan istilah classic internet color. Berikut tabel lengkap kata warna CSS:
Tabel Kata Warna dalam CSS
| Keyword Warna | Nilai RGB |
|---|---|
| aqua | #00ffff |
| black | #000000 |
| blue | #0000ff |
| fuchsia | #ff00ff |
| gray | #808080 |
| green | #008000 |
| lime | #00ff00 |
| maroon | #800000 |
| navy | #000080 |
| olive | #808000 |
| orange | #ffa500 |
| purple | #800080 |
| red | #ff0000 |
| silver | #c0c0c0 |
| teal | #008080 |
| white | #ffffff |
| yellow | #ffff00 |
Selain tabel warna standar di atas, beberapa modern web browser juga mendukung keyword warna yang disebut 147 SVG colors (atau X11 colors). List lengkap untuk keyword warna tambahan ini dapat dilihat di : https://developer.mozilla.org/en-US/docs/CSS/color_value.
Nilai property: Transparent
Pada kasus tertentu, kita ingin sebuah tag dalam CSS menjadi transparan, untuk keperluan ini CSS menyediakan keyword transparent sebagai nilai. Dengan memberikan nilai transparan, sebuah tag akan ‘melewatkan’ warna dari tag dibelakangnya.Sebagai contoh penggunaan kode warna diatas, saya akan menampilkannya dalam file warna.html sebagai berikut:
<!DOCTYPE html><html><head> <title>Contoh Penulisan Kode Warna CSS</title> <style type="text/css"> p.satu { color:#0000FF; } p.dua { color:#F00; } p.tiga { color:rgb(10, 255, 10); } p.empat { color:orange; } p.lima{ color:transparent; } </style></head><body> <p class="satu"> Kalimat ini akan berwarna biru </p> <br /> <p class="dua"> Kalimat ini akan berwarna merah </p> <br /> <p class="tiga"> Kalimat ini akan berwarna hijau </p> <br /> <p class="empat"> Kalimat ini akan berwarna orange </p> <br /> <p class="lima"> Kalimat ini sepertinya tidak akan terlihat </p></body></html>
Selain kode warna, property dari CSS dapat bernilai seperti pixel, point, maupun persen.
Dalam merancang halaman web, kadang ada saatnya kita membutuhkan fleksibilitas dalam menentukan nilai atau value tertentu untuk suatu properti, seperti tinggi sebuah box, besar ukuran font maupun besar border dari tabel. Untuk keperluan ini, CSS menyediakan berbagai ukuran seperti pixel, em, point, in, pc, dan pt.
Sebuah nilai dalam CSS dapat bernilai positif maupun negatif, bisa berupa angka bulat, maupun angka desimal. Namun beberapa properti juga memiliki batasan, seperti warna yang hanya bisa bernilai 0-255 atau 0 sampai dengan FF.
Nilai Absolut
Nilai absolut adalah sebuah nilai di dalam CSS, dimana nilai tersebut tidak dipengaruhi kondisi tag induknya (parent), dan didasarkan pada ukuran sebenarnya di media printing. Di dalam CSS, nilai absolut ini adalah: milimeter (mm), centimeter (cm), inchi (in), point (pt), dan pica (pc).Kelima nilai absolut ini berasal dari media percetakan. Kita tentunya sudah familiar dengan ukuran seperti milimeter, dan centimeter. Sedangkan 1 inchi adalah sekitar 25,4 mm.
Ukuran point (pt) sering digunakan dalam media cetak offline seperti Microsoft word dalam menentukan ukuran dari font. 1 inchi setara dengan 72pt, sehingga ukuran font normal sebesar 12pt setara dengan seperdelapan inchi. Contoh penggunaannya dalam CSS: p {font-size: 18pt;} sama dengan p {fontsize: 0.25in;}.
Ukuran pica (pc) mungkin tidak terlalu familiar. 1pc setara dengan 12pt. contoh penulisannya dalam CSS adalah p {font-size: 1.5pc;}.
Kelima nilai absolut tersebut, selain pt tidak terlalu sering digunakan, karena konversi dari ukuran dunia nyata ke dalam monitor dipengaruhi banyak hal, 1cm di satu monitor bisa jadi berbeda dengan 1cm pada monitor lainnya, sehinga agak menyulitkan dalam mendesain kode CSS yang “pas”.
Nilai Relatif
Berbeda dengan nilai absolut, nilai relatif didalam CSS dipengaruhi oleh tag disekitarnya. CSS mendukung banyak nilai relatif, beberapa yang kita bahas adalah: pixel (px), Em-height (em), dan X-height (ex).Ukuran pixel (px), merupakan ukuran yang paling sering digunakan dalam CSS. Di dalam CSS, pixel termasuk nilai relatif karena ia tidak terikat dengan perbandingan media tertentu. Didalam spesifikasi CSS2. 1, 1 pixel disamakan dengan 0.26mm atau 1/96 inci, namun banyak browser yang mengabaikan spesifikasi ini dan menyamakan 1 pixel dengan 1 pixel sesungguhnya yang terdapat di monitor.
1 unit Em-height (em) sama dengan besar ukuran asal yang diturunkan tag tersebut. Ketika kita mendefenisikan sebuah paragraf sebesar 12pt, maka sebuah tag <em> yang berada di dalam paragraf tersebut disebut secara inheritance akan berukuran 1em. Jika kita merubahnya menjadi em {font-size: 1.2em;} maka tag <em> tersebut akan berukuran 1,2 kali lebih besar dari ukuran tag p.
Ukuran relatif terakhir yaitu X-height (ex). ex berasal dari tinggi sebuah karakter “x” (huruf x kecil) dari sebuah font. Namun, banyak font yang tidak mendukung hal ini, sehingga browser kadang kala menyamakan 1ex dengan 0,5em.
Nilai Persentasi
Nilai persentasi adalah sebuah nilai per seratus (%) dari suatu property yang relatif terhadap induk (parent) dari tag tersebut. Misalkan kita membuat sebuah defenisi CSS sebagai p {font-size: 10pt;}, dan em {font-size: 120%;}. Maka jika terdapat tag <em> didalam tag <p>, maka ukuran font dari tag <em> akan menjadi 120% dari 10pt, atau sekitar 12pt.Dengan membuat nilai font lainnya menjadi persen, hal ini akan memudahkan jika suatu saat kita ingin merubah seluruh tampilan web. Hanya merubah ukuran tag <p>, maka secara langsung tag <em> akan menyesuaikan tampilannya.
Berikut adalah contoh perbandingan_fontsize.html, dimana saya menampilkan ukuran property font-size dengn berbagai value:
<!DOCTYPE html><html><head> <title>Contoh Perbandingan Ukuran dari font-size</title> <style type="text/css"> body { font-size:14pt; } p.satu { font-size:8mm; } p.dua { font-size:0.35in; } p.tiga { font-size:2.2pc; } p.empat { font-size:20px; } p.lima { font-size:1.8em } p.enam { font-size:3ex; } p.tujuh { font-size:190%; } </style></head><body> <p>Kalimat ini akan berukuran 14 point</p> <p class="satu">Kalimat ini akan berukuran 8 milimeter</p> <p class="dua">Kalimat ini akan berukuran 0,35 inchi</p> <p class="tiga">Kalimat ini akan berukuran 2,2 pica</p> <p class="empat">Kalimat ini akan berukuran 20 pixel</p> <p class="lima">Kalimat ini akan berukuran 1,8 em</p> <p class="enam">Kalimat ini akan berukuran 3 ex</p> <p class="tujuh">Kalimat ini akan berukuran 190%</p></body></html>
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.