info-b

Tutorial Belajar CSS Part 9: Mengenal Sifat Penurunan Dalam CSS (Inheritance)

Posted on

Pada panduan belajar CSS kali ini kita akan membahas mengenai efek penurunan property di dalam CSS, atau lebih populer dengan kata inggrisnya “inheritance” pada CSS. Panduan ini mungkin terkesan agak ‘rumit’, namun adalah diantara poin urgen pada memahami CSS.


Pengertian Inheritance pada CSS

Inheritance pada CSS ialah sifat penurunan efek CSS dari sebuah tag HTML kepada tag HTML lainnya. Syarat bagi inheritance ialah: tag tersebut mesti berada di pada tag lainnya.

Di pada HTML, setiap tag umumnya akan berada di pada tag lain. Bagi seluruh tag HTML, akan berada di pada tag <html>, dan bagi seluruh tag yang tampil di web browser akan berada di pada tag <body>.

Selaku contoh, perhatikan potongan HTML berikut ini:

Dari contoh diatas, tag <p> berada di pada tag <div>, sehingga dapat disebut tag <div> ialah induk (parent) dari tag <p>. Sedangkan tag <em> yang berada di pada tag <p> adalah anak (child) dari tag <p> dan grandchild dari tag <div>.

Jikalau kita membangun kode CSS selaku berikut:

Karenanya efek dari kode CSS tersebut akan membangun seluruh text di pada tag <div> akan berwarna hijau, walapun di pada tag <div> pun terdapat tag-tag lainnya. Dapat disebut bahwa efek CSS tersebut diturunkan (inherit) dari tag induk <div> kepada tag anak <p> dan <em>.

Namun perlu diperhatikan bahwa tak segala property CSS akan diturunkan dari tag induknya. Misalnya property border, hanya berlaku bagi satu tag induk saja dan tak akan diturunkan kepada tag anak.

Property seperti background-color yang digunakan bagi mengubah warna latar belakang hakekatnya pun tak diturunkan, namun ‘seolah-olah’ diturunkan. Hal ini terjadi karena nilai ‘default’ dari property background-color ialah ‘transparent’, dimana warna latar belakang tag induk akan dilewatkan, sehingga seolah-olah pun bewarna seperti induknya.


Mengenal Nilai Property: inherit

Bagi ‘memaksa’ proses penurunan, CSS mempunyai nilai property: inherit. Jikalau sebuah kode CSS mempunyai nilai property inherit, karenanya property tersebut akan mencopy nilai dari tag induk (parent).

Selaku contoh, karena property border secara default tak diturunkan, karenanya kita akan mencoba nilai inherit di property border.

Contoh HTML yang akan kita gunakan ialah inherit.html:

Pada contoh kode HTML diatas, saya menggunakan dua kalimat yang mempunyai nama class yang berbeda, yakni class satu dan class dua.

Di class=”satu”, saya hanya membangun property border dan color di tag div.satu. Karena prinsip inheritance pada CSS, seluruh kalimat di tag <div> yang mempunyai class=”satu” akan berwarna biru (sesuai dengan sifat inheritance-nya), namun efek border tak diturunkan kepada tag <p>.

Di class=”dua”, saya menambahkan nilai inherit bagi property border di tag <p>. Hasil dari nilai inherit ini akan membangun tag <p> pun mempunyai border yang sama dengan yang didefenisikan di tag induknya.

Sifat inheritance CSS ini akan mempermudah pada desain web, karena jikalau kita ingin membangun seluruh tulisan menjadi warna dan ukuran tertentu, lumayan dengan membangun style bagi tag induk, karenanya seluruh tag yang berada di dalamnya akan ikut berubah.

Misalkan kita ingin seluruh font berukuran 14px, karenanya kode CSSnya, lumayan dengan:

Dan seluruh tag yang berada di pada tag body (hampir segala tag adalah child dari tag body), ukuran fontnya akan berubah menjadi 14px.

Pada panduan CSS berikutnya, kita akan membahas mengenai cara Penulisan Kode Warna pada CSS.


eBook CSS Uncover Duniailkom

Jikalau kamu ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih komplit, mulai dari basic hingga fitur terbaru CSS3 seperti animasi dan web memiliki tampilan yang dinamis. Penjelasan lebih lanjut dapat ke: eBook CSS Uncover Duniailkom.


Sumber https://www.duniailkom.com/