Pengertian Inheritance dalam CSS
Inheritance dalam CSS adalah sifat penurunan efek CSS dari sebuah tag HTML kepada tag HTML lainnya. Syarat untuk inheritance adalah tag tersebut harus berada di dalam tag lainnya.
Di dalam HTML, setiap tag umumnya akan berada di dalam tag lain. Untuk seluruh tag HTML, akan berada di dalam tag <html>, dan untuk seluruh tag yang tampil di web browser akan berada di dalam tag <body>.
Sebagai contoh, perhatikan potongan HTML berikut ini:
<div><p>Saya sedang belajar <em>inheritance</em> CSS</p></div>
Dari contoh diatas, tag <p> berada di dalam tag <div>, sehingga dapat dikatakan 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>.
Jika kita membuat kode CSS sebagai berikut:
div {
color:blue;
}
Maka efek dari kode CSS tersebut akan membuat seluruh text di dalam tag <div> akan berwarna biru, walapun di dalam tag <div> juga terdapat tag-tag lainnya. Dapat dikatakan bahwa efek CSS tersebut diturunkan (inherit) dari tag induk <div> kepada tag anak <p> dan <em>.
Namun perlu diperhatikan 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.
Property seperti background-color yang digunakan untuk mengubah warna latar belakang sebenarnya juga tidak diturunkan, namun ‘seolah-olah’ diturunkan. Hal ini 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.
