CSS – Pengenalan dan Pengertian Inheritance
Inheritance – Halo teman -
teman semuanya,pada kali ini kita akan belajar lagi mengenai seri CSS yaitu Inheritance. Kita akan belajar pengertian dari CSS Inheritance, untuk itu simak terus artikel berikut ini.
A.Pembukaan
Pada artikel sebelumnya kita sudah mempelajari banyak mengenai CSS ini dimana sekarang kalian sudah jago dalam membuat style pada CSS. Pada pembahasan Inheritance ini tidak begitu mengarah kepada codingan namun hanya sekedar pengetahuan agar jika terdapat suatu masalah kalian bisa mambuat problem solving nya.
Sekarang saya akan memberikan pengertian mengenai Inheritance pada CSS dibawah ini.
1. Pengertian Inheritance
Inheritance jika diterjemahkan kedalam bahasa Indonesia memiliki arti pewarisan atau penurunan yang dimaksudkan disini ialah penurunan atau pewarisan dari tag html kepada tag html lainnya. Pada CSS, Inheritance bisa berjalan jika terdapat tag html pembungkus atau parent dan didalamnya terdapat tag html sebagai anak atau child.
Saya buat analogi seperti ini, seorang anak pasti akan mengikuti gen orang tua nya misal orangtuanya memiliki alis yang tebal maka anaknya pun memiliki alis yang tebal, saya beri contoh lagi jika orangtuanya memiliki mata yang sipit, maka anaknya pun memiliki mata yang sipit juga. Inilah merupakan cara kerja inheritance.
Sebagai contoh dibawah ini
Kita lihat bahwa tag <body> merupakan tag pembungkus dari tag <p> yang berarti tag <body> adalah tag induk atau parent sedangkan tag <p> merupakan anak atau child dari tag <body>. Oleh karena itu, semua style yang diberikan pada tag induk akan diwariskan kepada child nya.
Disini saya akan memberikan style untuk tag induknya yaitu tag <body> dan kita lihat apakah tag <body> akan mewariskan style nya ke tag <p>?
Setelah kita lihat gambar diatas, kita membuat kesimpulan bahwa benar tag induk <body> mewariskan style kepada tag anaknya yaitu tag <p>. Begitulah Inheritance pada CSS dimana tag induk akan mewarisi tag anaknya.
Gimana sudah mengerti?
Perlu diingat bahwa tidak semua tag pada html bisa diwarisi, beberapa ada yang tidak bisa diwariskan dari tag induknya. Disini saya akan berikan contoh tag yang tidak bisa diwariskan :
Background
-Border
-Display
-Height
-Width
-Margin
-Padding
-Overflow
Dan masih banyak lagi tag yang tidak dapat diwariskan. Sekarang, saya akan memberikan contoh tag yang bisa diwariskan yaitu :
-Color
-Font
-Text – indent
-Letter – spacing
-Text – align
-Text – transform
-Word – spacing
Ini beberapa contoh tag yang dapat diwariskan. Kita juga bisa memaksakan tag yang tidak bisa diwariskan menjadi tag yang bisa diwariskan dengan membuat value “inherit”.
Sebagai contoh dibawah ini
Saya akan membuat tag <h1>, <a> dan tag <p> dimana tag induknya adalah tag <body>
Lalu saya akan memberikan style pada tag <body> dengan warna kuning dan kita lihat hasilnya
Seperti yang saya bilang tadi diatas tag <h1> dan tag <p> adalah tag yang bisa diwariskan dari tag induknya yaitu tag <body>, sementara link tidak bisa diwariskan sehingga yang muncul adalah warna default dari link tersebut. Sekarang bagaimana caranya agar bisa mengubah link tersebut berwarna kuning? Yaitu dengan menggunakan value “inherit”.
Dalam menerapkan nya seperti pada gambar diatas ini yang artinya kita membuat pewarisan secara manual. Maka hasilnya akan menjadi seperti ini
Sekarang link telah berubah menjadi warna kuning yang artinya link telah diwariskan dari tag induknya.
Demikian pembahasan saya kali ini mengenai Inheritance pada CSS, semoga artikel ini bermanfaat bagi kalian semua. Jika kurang jelas silahkan tanya di kolom komentar, nantikan artikel saya berikutnya. Sekian dan Terima Kasih.