Bab 3: Mengenal CSS
CSS merupakan bahasa yang cukup kompleks dan memiliki kekuatan yang besar.
Dengan CSS, kita dapat menambahkan tata letak dan desain ke halaman-halaman web, serta membagikan style tersebut dari satu elemen ke elemen lain dan dari satu halaman ke halaman lainnya. Namun, sebelum kita bisa memanfaatkan seluruh kemampuannya, ada beberapa aspek penting dari CSS yang perlu benar-benar dipahami.
Pertama, sangat penting untuk mengetahui bagaimana style dirender. Secara khusus, kita perlu memahami cara kerja berbagai jenis selector serta bagaimana urutan selector tersebut dapat memengaruhi hasil akhir tampilan. Kita juga perlu memahami beberapa nilai properti yang sering digunakan dalam CSS, terutama yang berkaitan dengan warna dan ukuran.
Mari kita melihat lebih dalam cara kerja CSS untuk memahami apa yang sebenarnya terjadi di balik layar.
Cascade
Kita akan mulai membahas bagaimana style dirender dengan memahami konsep yang dikenal sebagai cascade dan melihat beberapa contohnya dalam praktik. Dalam CSS, semua style mengalir dari bagian atas style sheet ke bagian bawah, sehingga style-style baru dapat ditambahkan atau menimpa style sebelumnya.
Sebagai contoh, bayangkan kita memilih semua elemen paragraf di bagian atas style sheet dan mengatur warna latar belakangnya menjadi oranye serta ukuran font-nya menjadi 24 piksel. Kemudian, di bagian bawah style sheet, kita kembali memilih semua elemen paragraf dan mengatur warna latar belakangnya menjadi hijau, seperti yang ditunjukkan di sini.
p {
background: orange;
font-size: 24px;
}
p {
background: green;
}
Karena selector paragraf yang menetapkan warna latar belakang menjadi hijau muncul setelah selector paragraf yang menetapkan warna latar belakang menjadi oranye, maka selector tersebut akan memiliki prioritas. Semua paragraf akan tampil dengan latar belakang hijau. Ukuran font akan tetap 24 piksel karena selector paragraf kedua tidak menetapkan ukuran font yang baru.
Cascading Properties
Cascade juga berlaku pada properti di dalam sebuah selector individual. Sebagai contoh, misalkan kita memilih semua elemen paragraf dan menetapkan warna latar belakangnya menjadi oranye. Kemudian, tepat di bawah deklarasi properti dan nilai latar belakang oranye tersebut, kita menambahkan deklarasi properti dan nilai lain yang menetapkan warna latar belakang menjadi hijau, seperti yang terlihat di sini.
p {
background: orange;
background: green;
}
Karena deklarasi warna latar belakang hijau ditulis setelah deklarasi warna latar belakang oranye, maka deklarasi tersebut akan menimpa latar belakang oranye, dan seperti sebelumnya, paragraf-paragraf kita akan tampil dengan latar belakang hijau.
Semua style akan mengalir (cascade) dari bagian atas style sheet ke bagian bawah. Namun, ada kalanya cascade tidak berjalan dengan mulus. Hal ini terjadi ketika berbagai jenis selector digunakan dan tingkat specificity (bagian mana yang ditentukan lebih spesifik) dari selector-selector tersebut mematahkan cascade. Mari kita lihat lebih lanjut.
Menentukan Specificity
Setiap selector dalam CSS memiliki bobot specificity. Bobot specificity sebuah selector, bersama dengan posisinya dalam cascade, menentukan bagaimana style akan dirender.
Pada Bab 1 kita membahas tiga jenis selector yang berbeda: selector type, class, dan ID. Masing-masing selector ini memiliki bobot specificity yang berbeda.
Selector type memiliki bobot specificity paling rendah dan memiliki nilai poin 0-0-1. Selector class memiliki bobot specificity menengah dengan nilai poin 0-1-0. Terakhir, selector ID memiliki bobot specificity paling tinggi dengan nilai poin 1-0-0. Seperti yang dapat kita lihat, poin specificity dihitung menggunakan tiga kolom. Kolom pertama menghitung selector ID, kolom kedua menghitung selector class, dan kolom ketiga menghitung selector tipe.
Hal penting yang perlu diperhatikan di sini adalah bahwa selector ID memiliki bobot specificity yang lebih tinggi dibandingkan selector class, dan selector class memiliki bobot specificity yang lebih tinggi dibandingkan selector tipe.
Poin Specificity
Poin specificity sengaja dituliskan dengan tanda strip, karena nilainya tidak dihitung berdasarkan bilangan desimal. Selector class tidak memiliki nilai poin 10, dan selector ID juga tidak memiliki nilai poin 100. Sebaliknya, nilai-nilai ini harus dibaca sebagai 0-1-0 dan 1-0-0. Kita akan melihat lebih dekat alasan penggunaan tanda strip pada nilai poin ini sebentar lagi, ketika kita mulai mengombinasikan selector.
Semakin tinggi bobot specificity sebuah selector, semakin besar prioritas yang dimilikinya ketika terjadi konflik styling. Sebagai contoh, jika sebuah elemen paragraf dipilih menggunakan selector type di satu tempat dan selector ID di tempat lain, maka selector ID akan mengambil alih, terlepas dari di bagian mana selector ID tersebut muncul di dalam cascade.
<p id="food">...</p>
#food {
background: green;
}
p {
background: orange;
}
Bayangkan kita memiliki sebuah elemen paragraf dengan nilai atribut id food. Di dalam CSS, paragraf ini dipilih oleh dua selector yang berbeda: satu selector tipe dan satu selector ID. Walaupun selector tipe ditulis setelah selector ID di dalam cascade, selector ID tetap menang karena bobot specificity-nya lebih tinggi. Akibatnya, paragraf tersebut akan tampil dengan latar belakang hijau.
Bobot specificity dari berbagai jenis selector ini sangat penting untuk dipahami. Ada kalanya style tidak muncul pada elemen seperti yang kita harapkan, dan sering kali penyebabnya adalah bobot specificity selector yang mematahkan cascade, sehingga style tidak diterapkan sebagaimana mestinya.
Memahami cara kerja cascade dan specificity memang bukan hal yang sepele, dan topik ini akan terus kita bahas. Untuk sekarang, mari kita lanjutkan dengan melihat bagaimana kita bisa lebih spesifik dan lebih disengaja dalam memilih selector dengan cara mengombinasikannya. Perlu diingat, setiap kali kita menggabungkan selector, bobot specificity-nya juga ikut berubah.
Mengombinasikan Selector
Sejauh ini kita telah melihat cara menggunakan berbagai jenis selector secara terpisah, tetapi kita juga perlu mengetahui bagaimana menggunakan selector-selector tersebut secara bersamaan. Dengan mengombinasikan selector, kita dapat lebih spesifik dalam menentukan elemen atau kelompok elemen mana yang ingin dipilih.
Sebagai contoh, misalkan kita ingin memilih semua elemen paragraf yang berada di dalam sebuah elemen dengan nilai atribut class hotdog dan mengatur warna latar belakangnya menjadi cokelat. Namun, jika salah satu paragraf tersebut memiliki nilai atribut class mustard, kita ingin mengatur warna latar belakangnya menjadi kuning. HTML dan CSS kita mungkin akan terlihat seperti berikut:
<div class="hotdog">
<p>...</p>
<p>...</p>
<p class="mustard">...</p>
</div>
.hotdog p {
background: brown;
}
.hotdog p.mustard {
background: yellow;
}
Ketika selector dikombinasikan, cara membacanya adalah dari kanan ke kiri. Selector yang berada paling kanan, tepat sebelum tanda kurung kurawal pembuka, disebut sebagai key selector. Key selector inilah yang menentukan elemen mana yang akan menerima style. Selector-selector yang berada di sebelah kiri key selector berfungsi sebagai prequalifier.
Selector gabungan pertama di atas, .hotdog p, terdiri dari dua selector: satu selector class dan satu selector tipe. Kedua selector ini dipisahkan oleh satu spasi. Key selector-nya adalah selector tipe yang menargetkan elemen paragraf. Karena selector tipe ini dipra-kualifikasi oleh selector class hotdog, maka selector gabungan tersebut hanya akan memilih elemen paragraf yang berada di dalam elemen dengan nilai atribut class hotdog.
Selector kedua di atas, .hotdog p.mustard, terdiri dari tiga selector: dua selector class dan satu selector tipe. Perbedaan satu-satunya dengan selector pertama adalah penambahan selector class mustard di akhir selector tipe paragraf. Karena selector class mustard berada paling kanan dalam selector gabungan tersebut, maka dialah yang menjadi key selector, dan semua selector yang berada sebelumnya kini berperan sebagai prequalifier.
Spasi di dalam Selector
Pada selector gabungan sebelumnya, .hotdog p.mustard, terdapat spasi di antara selector class hotdog dan selector tipe paragraf, tetapi tidak ada spasi di antara selector tipe paragraf dan selector class mustard. Penggunaan—atau penghilangan—spasi ini memberikan perbedaan yang sangat besar pada cara selector bekerja.
Karena tidak ada spasi antara selector tipe paragraf dan selector class mustard, selector tersebut hanya akan memilih elemen paragraf yang memiliki class mustard. Jika selector tipe paragraf dihilangkan, dan selector class mustard diberi spasi di kedua sisinya, maka selector tersebut akan memilih elemen apa pun yang memiliki class mustard, tidak terbatas hanya pada paragraf.
Cara yang dianjurkan adalah tidak mendahului selector class dengan selector tipe. Umumnya, kita ingin memilih elemen apa pun yang memiliki class tertentu, bukan hanya satu jenis elemen saja. Dengan mengikuti cara ini, selector gabungan yang lebih tepat adalah .hotdog .mustard.
Jika dibaca dari kanan ke kiri, selector gabungan tersebut menargetkan elemen paragraf yang memiliki nilai atribut class mustard dan berada di dalam elemen dengan nilai atribut class hotdog.
Berbagai jenis selector dapat dikombinasikan untuk menargetkan elemen apa pun pada sebuah halaman. Seiring kita terus menulis berbagai selector gabungan, kekuatannya akan mulai terlihat. Namun sebelum melangkah ke sana, mari kita lihat bagaimana penggabungan selector memengaruhi bobot specificity sebuah selector.
Specificity pada Selector Gabungan
Ketika selector digabungkan, bobot specificity dari masing-masing selector juga ikut digabungkan. Bobot specificity gabungan ini dapat dihitung dengan menjumlahkan setiap jenis selector yang digunakan di dalam selector gabungan tersebut.
Melihat selector gabungan sebelumnya, selector pertama, .hotdog p, terdiri dari satu selector class dan satu selector tipe. Karena nilai poin selector class adalah 0-1-0 dan nilai poin selector tipe adalah 0-0-1, maka total nilai poin gabungannya adalah 0-1-1, yang diperoleh dengan menjumlahkan masing-masing jenis selector.
Selector kedua, .hotdog p.mustard, terdiri dari dua selector class dan satu selector tipe. Jika digabungkan, selector ini memiliki nilai specificity sebesar 0-2-1. Angka 0 pada kolom pertama menunjukkan tidak adanya selector ID, angka 2 pada kolom kedua menunjukkan dua selector class, dan angka 1 pada kolom terakhir menunjukkan satu selector tipe.
Jika dibandingkan, selector kedua dengan dua selector class memiliki bobot specificity dan nilai poin yang jelas lebih tinggi. Oleh karena itu, selector ini akan memiliki prioritas dalam cascade. Bahkan jika kita membalik urutan selector di dalam style sheet, dengan menempatkan selector berbobot lebih tinggi di atas selector berbobot lebih rendah seperti pada contoh ini, tampilan style tetap tidak akan berubah karena bobot specificity masing-masing selector.
.hotdog p.mustard {
background: yellow;
}
.hotdog p {
background: brown;
}
Secara umum, kita perlu selalu memperhatikan bobot specificity dari selector yang kita gunakan. Semakin tinggi bobot specificity tersebut, semakin besar kemungkinan cascade menjadi rusak.
Melapisi Style dengan Multiple Class
Salah satu cara untuk menjaga bobot specificity selector tetap rendah adalah dengan membuat kode se-modular mungkin, yaitu dengan membagikan style yang serupa dari satu elemen ke elemen lainnya. Salah satu cara untuk mencapai modularitas ini adalah dengan melapisi berbagai style menggunakan multiple class.
Elemen dalam HTML dapat memiliki lebih dari satu nilai atribut class, selama setiap nilainya dipisahkan oleh spasi. Dengan cara ini, kita dapat menerapkan style tertentu ke semua elemen dalam satu kategori, sekaligus menerapkan style tambahan hanya pada elemen-elemen tertentu dalam kategori tersebut.
Kita bisa mengikat style yang ingin terus digunakan kembali ke satu class, lalu melapisi style tambahan melalui class lainnya.
Sebagai contoh, mari kita lihat kasus tombol. Misalnya kita ingin semua tombol memiliki ukuran font 16 piksel, tetapi warna latar belakang tombol berbeda-beda tergantung di mana tombol tersebut digunakan. Kita dapat membuat beberapa class dan menggabungkannya pada sebuah elemen sesuai kebutuhan untuk menerapkan style yang diinginkan.
<a class="btn btn-danger">...</a>
<a class="btn btn-success">...</a>
.btn {
font-size: 16px;
}
.btn-danger {
background: red;
}
.btn-success {
background: green;
}
Di sini kita dapat melihat dua elemen anchor, yang masing-masing memiliki beberapa nilai atribut class. Class pertama, btn, digunakan untuk menerapkan ukuran font sebesar 16 piksel pada kedua elemen tersebut. Selanjutnya, elemen anchor pertama menggunakan class tambahan btn-danger untuk menerapkan warna latar belakang merah, sementara elemen anchor kedua menggunakan class tambahan btn-success untuk menerapkan warna latar belakang hijau. Style yang kita gunakan di sini bersih dan modular.
Dengan menggunakan multiple class, kita dapat melapisi sebanyak mungkin style sesuai kebutuhan, sambil menjaga kode tetap ringkas dan bobot specificity tetap rendah. Seperti halnya memahami cascade dan menghitung specificity, pendekatan ini membutuhkan waktu untuk benar-benar dikuasai, tetapi kemampuan kita akan terus meningkat seiring berjalannya setiap pelajaran.
Nilai Properti CSS yang Umum
Kita sudah menggunakan beberapa nilai properti CSS yang umum, seperti nilai warna berbentuk kata kunci (keyword) red dan green. Mungkin kamu belum terlalu memikirkannya—dan itu tidak masalah. Sekarang kita akan meluangkan waktu untuk membahas kembali beberapa nilai properti yang sudah digunakan sebelumnya, sekaligus mengeksplorasi nilai-nilai properti lain yang umum dan akan segera sering kita pakai.
Secara khusus, kita akan melihat nilai properti yang berkaitan dengan warna dan satuan ukuran panjang.
Warna
Semua nilai warna dalam CSS didefinisikan dalam ruang warna sRGB (standard red, green, and blue). Warna-warna dalam ruang ini dibentuk dengan mencampurkan kanal warna merah, hijau, dan biru, mirip dengan cara televisi dan monitor menghasilkan berbagai warna yang ditampilkan. Dengan mencampurkan tingkat merah, hijau, dan biru yang berbeda-beda, kita dapat menghasilkan jutaan warna—dan menemukan hampir semua warna yang kita inginkan.
Saat ini, ada empat cara utama untuk merepresentasikan warna sRGB di dalam CSS: keyword, notasi heksadesimal, serta nilai RGB dan HSL.
Keyword Colors
Nilai warna berbentuk keyword adalah nama warna (seperti red, green, atau blue) yang dipetakan ke warna tertentu. Nama-nama keyword ini beserta warna yang diwakilinya ditentukan oleh spesifikasi CSS. Sebagian besar warna yang umum, beserta beberapa warna yang cukup unik, memiliki nama keyword.
Daftar lengkap nama warna bisa dilihat di halaman CSS specification.
Pada contoh ini, kita menerapkan latar belakang maroon pada setiap elemen yang memiliki nilai atribut class task, dan latar belakang kuning pada setiap elemen yang memiliki nilai atribut class count.
.task {
background: maroon;
}
.count {
background: yellow;
}
Meskipun nilai warna berbentuk keyword bersifat sederhana, pilihan warnanya terbatas sehingga bukan merupakan pilihan nilai warna yang paling populer.
Warna Heksadesimal
Nilai warna heksadesimal terdiri dari tanda pagar, atau hash, #, yang diikuti oleh tiga atau enam karakter. Karakter-karakter tersebut menggunakan angka 0 hingga 9 dan huruf a hingga f, baik huruf besar maupun kecil. Nilai-nilai ini merepresentasikan warna merah, hijau, dan biru.
Pada notasi enam karakter, dua karakter pertama mewakili merah, karakter ketiga dan keempat mewakili hijau, dan dua karakter terakhir mewakili kanal biru. Pada notasi tiga karakter, karakter pertama mewakili kanal merah, karakter kedua mewakili kanal hijau, dan karakter terakhir mewakili kanal biru.
Jika pada notasi enam karakter dua karakter pertama merupakan pasangan yang sama, karakter ketiga dan keempat juga sama, serta dua karakter terakhir juga sama, maka nilai enam karakter tersebut dapat dipersingkat menjadi notasi tiga karakter. Untuk melakukannya, cukup gunakan satu karakter dari setiap pasangan yang berulang. Sebagai contoh, sebuah warna oranye yang direpresentasikan oleh warna heksadesimal #ff6600 juga dapat ditulis sebagai #f60.
Pasangan karakter tersebut diperoleh dengan mengonversi nilai 0 hingga 255 ke dalam format heksadesimal. Perhitungannya memang sedikit rumit—dan bahkan layak dibahas dalam buku tersendiri—tetapi cukup dipahami bahwa nilai 0 merepresentasikan hitam dan nilai f merepresentasikan putih.
Jutaan Warna Heksadesimal
Ada jutaan warna heksadesimal—tepatnya lebih dari 16,7 juta. Begini penjelasannya…
Setiap karakter dalam warna heksadesimal memiliki 16 kemungkinan nilai, yaitu 0 hingga 9 dan a hingga f. Karena karakter-karakter tersebut dikelompokkan berpasangan, maka setiap pasangan memiliki 256 kemungkinan warna (16 dikalikan 16, atau 16 kuadrat).
Dengan tiga kelompok yang masing-masing memiliki 256 kemungkinan warna, kita mendapatkan total lebih dari 16,7 juta warna (256 dikalikan 256 dikalikan 256, atau 256 pangkat tiga).
Untuk menghasilkan warna latar belakang maroon dan yellow yang sama seperti sebelumnya, kita dapat mengganti nilai warna berbentuk keyword dengan nilai warna heksadesimal, seperti yang ditunjukkan di sini.
.task {
background: #800000;
}
.count {
background: #ff0;
}
Nilai warna heksadesimal sudah digunakan sejak lama dan menjadi cukup populer karena menawarkan pilihan warna yang sangat banyak. Namun, nilai-nilai ini bisa sedikit sulit digunakan, terutama jika kamu belum terlalu terbiasa dengannya. Untungnya, Adobe telah membuat Adobe Color, sebuah aplikasi gratis yang menyediakan roda warna untuk membantu kita menemukan warna apa pun yang kita inginkan beserta nilai heksadesimalnya.
Selain itu, sebagian besar aplikasi pengedit gambar, seperti Adobe Photoshop, juga menyediakan kemampuan untuk menemukan nilai warna heksadesimal.
Warna RGB & RGBa
Nilai warna RGB dinyatakan menggunakan fungsi rgb(), yang merupakan singkatan dari red, green, dan blue. Fungsi ini menerima tiga nilai yang dipisahkan koma, masing-masing berupa bilangan bulat dari 0 hingga 255. Nilai 0 merepresentasikan hitam murni, sedangkan nilai 255 merepresentasikan putih murni.
Seperti yang dapat kita duga, nilai pertama di dalam fungsi rgb() merepresentasikan merah, nilai kedua merepresentasikan hijau, dan nilai ketiga merepresentasikan biru.
Jika kita ingin merekonstruksi warna oranye seperti sebelumnya menggunakan nilai warna RGB, maka warnanya akan ditulis sebagai rgb(255, 102, 0).
Selain itu, dengan menggunakan warna latar belakang maroon dan kuning yang sama seperti sebelumnya, kita juga dapat mengganti nilai warna berbentuk keyword atau heksadesimal dengan nilai warna RGB.
.task {
background: rgb(128, 0, 0);
}
.count {
background: rgb(255, 255, 0);
}
Nilai warna RGB juga dapat menyertakan kanal alpha, atau transparansi. Fungsi rgba() membutuhkan nilai keempat, yang harus berupa angka antara 0 dan 1, termasuk nilai desimal. Nilai 0 menghasilkan warna yang sepenuhnya transparan, artinya tidak terlihat, sedangkan nilai 1 menghasilkan warna yang sepenuhnya buram. Nilai desimal di antara 0 dan 1 akan menghasilkan warna semi-transparan.
Jika kita ingin warna oranye yang sama seperti sebelumnya tampil dengan tingkat opasitas 50%, kita dapat menggunakan nilai warna RGBa rgba(255, 102, 0, .5).
Kita juga dapat mengubah tingkat opasitas warna latar belakang maroon dan kuning. Kode berikut mengatur warna latar belakang maroon menjadi 25% buram dan membiarkan warna latar belakang yellow tetap 100% buram.
.task {
background: rgba(128, 0, 0, .25);
}
.count {
background: rgba(255, 255, 0, 1);
}
Nilai warna RGB semakin populer, terutama karena kemampuannya untuk membuat warna semi-transparan menggunakan RGBa.
Warna HSL & HSLa
Nilai warna HSL dinyatakan menggunakan fungsi hsl(), yang merupakan singkatan dari hue, saturation, dan lightness. Di dalam tanda kurung, fungsi ini menerima tiga nilai yang dipisahkan koma, mirip dengan rgb().
Nilai pertama, hue, adalah angka tanpa satuan dari 0 hingga 360. Angka 0 sampai 360 merepresentasikan roda warna, dan nilainya menunjukkan derajat posisi sebuah warna pada roda warna tersebut.
Nilai kedua dan ketiga, saturation dan lightness, dinyatakan dalam bentuk persentase dari 0 hingga 100%. Nilai saturation menunjukkan seberapa kuat kejenuhan warna dari hue, di mana 0 berarti abu-abu dan 100% berarti jenuh sepenuhnya. Nilai lightness menunjukkan seberapa gelap atau terang warna tersebut, dengan 0 berarti hitam sepenuhnya dan 100% berarti putih sepenuhnya.
Kembali ke contoh warna oranye kita, jika ditulis sebagai nilai warna HSL, maka akan menjadi hsl(24, 100%, 50%).
Warna latar belakang maroon dan kuning yang kita gunakan sebelumnya juga dapat dinyatakan sebagai nilai warna HSL, seperti yang ditunjukkan di sini.
.task {
background: hsl(0, 100%, 25%);
}
.count {
background: hsl(60, 100%, 50%);
}
Nilai warna HSL, seperti RGBa, juga dapat menyertakan kanal alfa, atau transparansi, dengan menggunakan fungsi hsla(). Perilaku kanal alfa ini sama seperti pada fungsi rgba(). Sebuah nilai keempat antara 0 dan 1, termasuk nilai desimal, perlu ditambahkan ke dalam fungsi untuk menentukan tingkat opasitas.
Warna oranye yang sama seperti sebelumnya, jika dituliskan sebagai nilai warna HSLa dengan opasitas 50%, akan direpresentasikan sebagai hsla(24, 100%, 50%, .5).
Warna latar belakang maroon dengan opasitas 25% dan warna latar belakang yellow dengan opasitas 100% seperti sebelumnya akan terlihat seperti berikut jika dituliskan menggunakan nilai warna HSLa.
.task {
background: hsla(0, 100%, 25%, .25);
}
.count {
background: hsla(60, 100%, 50%, 1);
}
Nilai warna HSL merupakan nilai warna yang paling baru tersedia di dalam CSS. Namun, karena usianya yang relatif baru dan dukungannya di berbagai browser, nilai ini belum digunakan seluas nilai warna lainnya.
Untuk saat ini, nilai warna heksadesimal masih menjadi yang paling populer karena dukungannya yang luas; sementara itu, ketika dibutuhkan kanal alfa untuk transparansi, nilai warna RGBa lebih sering digunakan. Preferensi ini bisa saja berubah di masa depan, tetapi untuk sekarang kita akan menggunakan nilai warna heksadesimal dan RGBa.
Satuan Pengukuran (Length)
Length di dalam CSS mirip dengan warna, karena ada beberapa jenis length yang berbeda, masing-masing dengan kegunaannya sendiri. Nilai panjang terbagi menjadi dua bentuk, yaitu absolut dan relatif, yang masing-masing menggunakan satuan pengukuran yang berbeda.
Untuk saat ini, kita akan berfokus pada nilai-nilai yang lebih umum—dan lebih sederhana—karena nilai yang lebih kompleks memiliki kekuatan yang jauh lebih besar daripada yang kita butuhkan saat ini.
Satuan Pengukuran Absolut (Absolute Length)
Nilai absolute length merupakan nilai yang paling sederhana, karena nilainya terikat pada ukuran fisik tertentu, seperti inci, sentimeter, atau milimeter. Satuan yang paling populer dikenal sebagai piksel dan direpresentasikan dengan notasi satuan px.
Pixel
Satu piksel setara dengan 1/96 inci; dengan demikian, terdapat 96 piksel dalam satu inci. Namun, ukuran pasti sebuah piksel dapat sedikit berbeda antara perangkat dengan kepadatan layar.
Piksel telah digunakan sejak lama dan umum dipakai bersama berbagai properti CSS. Pada kode ini, piksel digunakan untuk mengatur ukuran font semua paragraf menjadi 14 piksel.
p {
font-size: 14px;
}
Dengan semakin beragamnya perangkat tampilan dan ukuran layar yang berbeda-beda, piksel mulai kehilangan sebagian popularitasnya. Sebagai satuan pengukuran absolut, piksel tidak menawarkan banyak fleksibilitas. Meski begitu, piksel tetap dapat diandalkan dan sangat baik digunakan sebagai langkah awal. Kita akan cukup sering menggunakannya selama kita masih mempelajari dasar-dasar HTML dan CSS.
Satuan Pengukuran Relatif (Relative Length)
Selain satuan absolut, ada juga satuan relatif. Nilai satuan relatif sedikit lebih kompleks, karena bukan merupakan satuan pengukuran yang tetap; nilainya bergantung pada ukuran dari pengukuran lain.
Persentase
Persentase, yang direpresentasikan dengan notasi satuan %, merupakan salah satu nilai relatif yang paling populer. Panjang berbasis persentase ditentukan berdasarkan panjang dari elemen lain. Sebagai contoh, untuk mengatur lebar sebuah elemen menjadi 50%, kita perlu mengetahui lebar elemen induknya—yaitu elemen tempat elemen tersebut dinest—lalu mengambil 50% dari lebar elemen induk tersebut.
.col {
width: 50%;
}
Di sini kita mengatur lebar elemen dengan nilai atribut class col menjadi 50%. Nilai 50% tersebut akan dihitung relatif terhadap lebar elemen induknya.
Persentase sangat membantu untuk mengatur tinggi dan lebar elemen serta membangun tata letak sebuah halaman web. Kita akan sering mengandalkannya untuk membantu pekerjaan di area ini.
Em
Satuan em juga merupakan nilai relatif yang sangat populer. Satuan em direpresentasikan dengan notasi satuan em, dan panjangnya dihitung berdasarkan ukuran font sebuah elemen.
Satu satuan em setara dengan ukuran font elemen tersebut. Jadi, sebagai contoh, jika sebuah elemen memiliki ukuran font 14 piksel dan lebar yang diatur menjadi 5em, maka lebarnya akan menjadi 70 piksel (14 piksel dikalikan 5).
.banner {
font-size: 14px;
width: 5em;
}
Jika ukuran font tidak ditentukan secara eksplisit pada sebuah elemen, maka satuan em akan dihitung berdasarkan ukuran font dari elemen induk terdekat yang memiliki ukuran font yang sudah ditetapkan.
Satuan em sering digunakan untuk styling teks, termasuk ukuran font, serta untuk mengatur jarak di sekitar teks, seperti margin dan padding. Kita akan membahas teks dengan lebih mendalam pada Bab 6.
Sebenarnya ada jauh lebih banyak satuan pengukuran absolut dan relatif selain yang disebutkan di sini. Namun, tiga satuan ini—piksel, persentase, dan em—merupakan yang paling populer dan akan menjadi satuan yang paling sering kita gunakan.
Ringkasan
Sayangnya, website Styles Conference kita belum banyak berkembang pada pelajaran ini. Kita lebih berfokus pada fondasi CSS, membahas secara mendetail bagaimana CSS bekerja serta beberapa nilai umum yang pasti akan sering kita gunakan.
Sebagai ringkasan singkat, dalam pelajaran ini kita telah membahas hal-hal berikut: • Bagaimana style sheet mengalir (cascade) dari bagian atas ke bagian bawah sebuah file • Apa itu specificity dan bagaimana cara menghitungnya • Cara mengombinasikan selector untuk menargetkan elemen atau kelompok elemen tertentu • Cara menggunakan multiple class pada satu elemen untuk melapisi berbagai style agar kode lebih modular • Berbagai nilai warna yang tersedia dalam CSS, termasuk keyword, heksadesimal, RGB, dan HSL • Berbagai nilai panjang yang tersedia dalam CSS, termasuk piksel, persentase, dan satuan em
Masih banyak hal yang perlu kita pelajari, tetapi dasar-dasarnya mulai terbentuk dengan baik. Pada beberapa pelajaran berikutnya, kita akan terus mendalami CSS, dan website kita akan benar-benar mulai terbentuk.