Skip to content Skip to sidebar Skip to footer
Home / css / css-dasar / web-design

CSS Dasar Part 8 - Inheritance Pada CSS

Posted by Eren Rere Post a Comment
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 yang paling sering kita temui dan mudah dipahami, ketika orang tua mewarisi apa yang ada dalam dirinya kepada anaknya, sebagai contoh mewarisi warna rambut, warna kulit, warna mata, bentuk hidung, perilaku dan lain sebagainya.

ibu atau orang tua mewarisi sifat secara fisik kepada anakanya seperti rambut, warna kulit, mata, bentuk wajah dan lain sebagainya
Orang Tua Dan Anak


Pengertian inheritance sendiri berdasarkan link W3C  : 

“Sebuah elemen mewarisi beberapa nilai dari properti yang dimiliki oleh elemen parent-nya”

Dari penjelasan di atas memilki makna bahwa apabila parent sebuah elemen HTML memilki nilai dari suatu property tertentu, maka kecenderungannya elemen anak dari HTML tersebut juga akan memilki nilai dari elemen HTML yang dimilki parent-nya. Selanjutnya, untuk property CSS yang memilki sifat inheritance adalah 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 kasus, kecenderungan nilai diatas yang dimiliki parent akan dimilki oleh elemen anak-nya, sebagai contoh bisa lihat gambar dibawah ini :

parent sebuah elemen HTML memilki nilai dari suatu property tertentu, maka kecenderungannya elemen anak dari HTML tersebut juga akan memilki nilai dari elemen HTML yang dimilki parent-nya
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:


  • 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.

Post a Comment for "CSS Dasar Part 8 - Inheritance Pada CSS"

Silakan berkomentar secara bijak dan sesuai dengan topik pembahasan