CSS Dasar Part 8 - Inheritance Pada CSS

CSS Dasar Part 8 - Inheritance Pada CSS - Konsep Inheritance/Pewarisan pada CSS, adalah sebuah konsep sederhana pada nilai sebuah property yang ada pada CSS. Mungkin suatu ketika, kita menjumpai kasus ketika kita memberikan style pada elemen HTML tertentu, namun ada bagian dalam elemen tersebut yang tidak berpengaruh atas pemberian style tersebut. Mungkin salah satu penyebab dari kasus ini, karena masalah nilai inheritance property tersebut.

Analogi yg paling acapkali kita temui & mudah dipahami, waktu orang tua mewarisi apa yg ada pada dirinya pada anaknya, menjadi model mewarisi warna rambut, rona kulit, warna mata, bentuk hidung, perilaku dan lain sebagainya.

Orang Tua Dan Anak

Pengertian inheritance sendiri berdasarkan link W3C  :

?Sebuah elemen mewarisi beberapa nilai dari properti yg dimiliki sang elemen parent-nya?

Dari penerangan pada atas memilki makna bahwa bila parent sebuah elemen HTML memilki nilai dari suatu property eksklusif, maka kecenderungannya elemen anak menurut HTML tadi jua akan memilki nilai berdasarkan elemen HTML yang dimilki parent-nya. Selanjutnya, buat property CSS yg memilki sifat inheritance merupakan sebagai berikut :

• color : property css untuk memberikan warna pada text
• font : property css yang digunakan untuk menentukan jenis huruf
• letter-spacing : property css yang digunakan untuk mengatur jarak antar huruf
• line-height : property css yang digunakan untuk mengatur jarak antar baris
• list-style : property css yang digunakan untuk memberikan style pada sebuah daftar / list
• text-align : property yang digunakan untuk mengatur batas rata
• text-indent : property css yang digunakan untuk mengatur jarak awal sebuah paragraph
• text-transform : property css yang digunakan untuk mengatur perubahan text baik menjadi huruf kecil, huruf besar atau huruf kapital
• visibility : property css yang digunakn untuk mengontrol fungsi visibility pada sebuah elemen HTML
• white-space : property css yang digunakan untuk mengatur keseluruhan spasi dalam paragraph

Dalam banyak perkara, kecenderungan nilai diatas yg dimiliki parent akan dimilki sang elemen anak-nya, menjadi model bisa lihat gambar dibawah ini :

Contoh Kasus Penerapan Inheritance

Contoh gambar di atas, yang menjadi parent adalah body. contoh di atas body memiliki property CSS seperti color yang diberi warna merah dan font yang diberi jenis arno pro. Maka elemen body ini harusnya akan mewarisi color untuk textnya merah dan font-family jenis arno pro kepada elemen anak-nya yang terdiri dari elemen h1, h3, p, dan a. Namun ada suatu ketika suatu elemen tidak mewarisi nilai dari parentnya. Sebagai contoh di atas, elemen link yang direpresentasikan dengan tag<a> tidak mau mewarisi nilai dari property color yang dimilik parent-nya. Tag <a> secara default memilki text berwarna biru, even elemen dari parent-nya berwarna merah, elemen tersebut tidak akan mengikuti warna dari parent-nya. Kecuali elemen link tersebut kita beri nilai “inherit”. Pemberian nilai “inherit” ini berfungsi agar elemen yang menjadi elemen anak mengikuti nilai property yang dimiliki parent-nya, kapanpun parent-nya merubah nilai dari property atau menambahkan property inheritance lainnya. Dalam kasus ini, pemberian nilai “inherit” dari property color, agar elemen link tersebut, warna text-nya berubah menjadi warna merah. Untuk nilai/value dari a, sebenarnya bisa kita tulis value color-nya “red”, namun ketika property color dari parent-nya berubah ke warna/nilai lain, nilai dari elemen link ini tidak akan ikut berubah seperti parentnya. Karena itu lebih baik, apabila memang kita mau nilai dari elemen link tersebut mengikuti warna parent-nya, sebaiknya berikan nilai “inherit” saja.

Pembahasan mengenai konsep inheritance yang ada pada CSS, sekian dulu. Semoga teman-teman bisa mengerti penjelasan ini, terutama bagi para pemula yang baru belajar CSS seperti saya. Tetap semangat nge-blog. See you on my next articles. Bye-bye....

Referensi:

https://www.W3schools.Com

https://www.W3schools.Com/css

http://www.W3.Org/style/CSS

https://developer.Mozilla.Org/en-US/docs/Web/CSS/Reference

https://www.W3.Org/TR/CSS21/cascade.Html#inheritance

• kalau ada pertanyaan, silakan tulis saja dikotak komentar dibawah, asal bukan spam dan sesuai dengan topik pembahasan.
• the language in this article uses indonesian, if you didn't understand with my language, you can use google translate or any others translator.

Bagikan Artikel ini