Kuy Belajar - Mengenal Sifat Inheritance atau Penurunan di CSS. Assalamualaikum sobat semua. Alhamdulillah kita ketemu lagi di blog kuy-belajar, sebelumnya kita sudah membahas materi pertama kita tentang Mengenal Urutan Prioritas Selector di CSS Secara Spesifik kita akan menyambung pembahasan tersebut yaitu dengan materi Mengenal Sifat Inheritance atau Penurunan di CSS. Sobat sudah penasaran kan? kuy simak pembahasan berikut ini!
Mengenal apa itu Inheritance
Apa itu inheritance? jika kita terjemahkan kata inheritance ke dalam bahasa Indonesia yaitu 'pewarisan' atau 'turunan'. Sedangkan di dalam bahasa pemrograman, inheritance
merupakan suatu entitas/obyek dapat mempunyai entitas/obyek turunan. Dengan konsep inheritance, sebuah class dapat mempunyai class turunan.
Di dalam CSS sendiri, inheritance dapat kita artikan sebagai sifat penurunan efek CSS dari sebuah tag di HTML kepada tag HTML yang lainnya. Syarat untuk melakukan inheritance yaitu tag tersebut harus berada di dalam tag lainnya.
Untuk lebih jelas tentang sifat inheritance, kuy simak kode berikut ini.
<!DOCTYPE html>
<html>
<head>
<title>Kuy belajar Inheritance dalam CSS</title>
</head>
<body>
<div><p>Saya sedang belajar <em>inheritance</em> CSS</p></div>
</body>
</html>
Jika kita simak contoh diatas, tag <p> berada di dalam tag <div>, sehingga dapat diartikan bahwa tag <div> adalah induk (parent) dari tag <p>. Sedangkan tag <em> yang berada di dalam tag <p> merupakan anak (child) dari tag <p> dan grandchild dari tag <div>.
Setelah itu kita tambah kan kode CSS berikut ini di antara tag <head> dan </head>.
Dari gambar di atas terlihat bahwa seluruh teks yang berada di dalam tag <div> akan berwarna hijau. meskipun dapat kita lihat bahwa di dalam tag <div> pun terdapat tag-tag lain. Namun di karenakan sifat dari inheritance itu sendiri yang memaksa agar tag-tag lain yang berada di dalam tag <div> untuk mewariskan sifat dari tag induk itu sendiri.
Sehingga tag child seperti tag <p> dan <em> mengikuti perintah dari tag <div> agar teks tersebut berwarna hijau.
Namun ada hal yang perlu kita perhatikan bahwa tidak semua property CSS akan diturunkan dari tag induknya. Misalnya property border, hanya berlaku untuk satu tag induk saja dan tidak akan diturunkan kepada tag anak.
Dan pada property seperti background-color yang kita gunakan untuk mengubah warna latar belakang sebenarnya sama sperti pada property border, yaitu sifat dari tag induk tidak diturunkan, namun ‘seolah-olah’ diturunkan.
Hal ini tersebut terjadi karena nilai ‘default’ dari property background-color adalah ‘transparent’, dimana warna latar belakang tag induk akan dilewatkan, sehingga seolah-olah juga bewarna seperti induknya.
<style>
div {
color:green;
}
</style>
Sehingga tag child seperti tag <p> dan <em> mengikuti perintah dari tag <div> agar teks tersebut berwarna hijau.
Namun ada hal yang perlu kita perhatikan bahwa tidak semua property CSS akan diturunkan dari tag induknya. Misalnya property border, hanya berlaku untuk satu tag induk saja dan tidak akan diturunkan kepada tag anak.
Dan pada property seperti background-color yang kita gunakan untuk mengubah warna latar belakang sebenarnya sama sperti pada property border, yaitu sifat dari tag induk tidak diturunkan, namun ‘seolah-olah’ diturunkan.
Hal ini tersebut terjadi karena nilai ‘default’ dari property background-color adalah ‘transparent’, dimana warna latar belakang tag induk akan dilewatkan, sehingga seolah-olah juga bewarna seperti induknya.
Mengenal Value Inherit pada CSS
Di dalam CSS pun terdapat sebuah value yang dapat 'memaksa' proses penurunan atau inheritance. Jika sebuah kode CSS memiliki nilai property inherit, maka property tersebut akan mencopy nilai dari tag induk (parent).
Sebagai contoh, kita akan menggunakan property border, karena property border secara default tidak dapat diturunkan, maka kita akan mencoba nilai inherit pada property border.
Kuy simak contoh kode berikut ini.
<html>
<head>
<title>Contoh Inheritance dalam CSS</title>
<style type="text/css">
div.satu {
border: 1px solid black;
color: blue;
}
div.dua {
border: 1px solid black;
}
p.dua {
border: inherit;
}
</style>
</head>
<body>
<div class="satu">
<p class="satu">
Kalimat ini tanpa <em class="satu">nilai property inherit</em> CSS
</p>
</div>
<br />
<div class="dua">
<p class="dua">
Kalimat ini menggunakan <em class="dua">nilai property inherit</em> CSS
</p>
</div>
</body>
</html>
Maka akan menghasilkan seperti pada gambar berikut ini.
Dalam contoh kode HTML diatas, kita menggunakan dua kalimat yang memiliki nama class yang berbeda, yakni class satu dan class dua.
Pada class=”satu”, saya hanya membuat property border dan color pada tag div.satu. Karena prinsip inheritance dalam CSS, seluruh kalimat pada tag <div> yang memiliki class=”satu” akan berwarna biru (sesuai dengan sifat inheritance-nya), namun efek border tidak diturunkan kepada tag <p>.
Pada class=”dua”, saya menambahkan nilai inherit untuk property border pada tag <p>. Hasil dari nilai inherit ini akan membuat tag <p> juga memiliki border yang sama dengan yang didefenisikan pada tag induknya.
Dengan sifat dari inheritance CSS ini tentu saja akan memudahkan kita dalam desain web, karena jika kita ingin membuat seluruh tulisan menjadi warna dan ukuran tertentu, cukup dengan membuat style untuk tag induk, maka seluruh tag yang berada di dalamnya akan ikut berubah.
Pada class=”satu”, saya hanya membuat property border dan color pada tag div.satu. Karena prinsip inheritance dalam CSS, seluruh kalimat pada tag <div> yang memiliki class=”satu” akan berwarna biru (sesuai dengan sifat inheritance-nya), namun efek border tidak diturunkan kepada tag <p>.
Pada class=”dua”, saya menambahkan nilai inherit untuk property border pada tag <p>. Hasil dari nilai inherit ini akan membuat tag <p> juga memiliki border yang sama dengan yang didefenisikan pada tag induknya.
Dengan sifat dari inheritance CSS ini tentu saja akan memudahkan kita dalam desain web, karena jika kita ingin membuat seluruh tulisan menjadi warna dan ukuran tertentu, cukup dengan membuat style untuk tag induk, maka seluruh tag yang berada di dalamnya akan ikut berubah.
Saya rasa itu lah pembahasan kita tentang Mengenal Sifat Inheritance atau Penurunan di CSS. kita sudah mempelajari fungsi berserta contoh nya masing-masing.
Sekian dulu dari saya "Singkat, Semoga Bermanfaat"