Inheritance dalam CSS adalah penurunan property CSS dari tag HTML yang satu kepada yang lainnya. Syarat untuk inheritance, tag tersebut harus berada di dalam tag induknya.
Sebagai contoh, perhatikan potongan HTML berikut ini:
Jika kita membuat kode CSS sebegai berikut:
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.
Mengenal nilai property inherit
Untuk ‘memaksa’ proses penurunan, CSS memiliki nilai property inherit. Sebuah property jika diberi nilai inherit, property tersebut akan mencopy nilainya dari nilai property induk dari tag tersebut. Sebagai contoh, karena property border secara default tidak diturunkan, maka kita akan mencoba nilai inherit pada property border.
Contoh HTML yang akan kita gunakan adalah inherit.html:
Pada kalimat kedua, saya menambahkan property inherit pada tag <p>, maka kalimat kedua tersebut akan memiliki 2 buah border, satu dari tag <div>, dan yang kedua dari tag <p>.
Sifat inheritance CSS ini akan memudahkan 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.
Misalkan kita ingin seluruh font berukuran 14px, maka kode CSSnya, cukup sebagai berikut:
Selanjutnya, akan membahas tentang cara Penulisan Kode Warna pada CSS.
<div><p>Saya sedang belajar <em><span id="c6tzq_11" class="c6tzq">inheritance</span></em> CSS</p></div>Dari contoh diatas, tag <p> merupakan berada di dalam tag <div>, sehingga dapat dikatakan tag <div> adalah induk (parent) dari tag <p>, tag <em> yang berapa di dalama tag <p> merupakan anak (child) dari tag <p> dan grandchild dari tag <div>.
Jika kita membuat kode CSS sebegai berikut:
div {Maka efek dari kode CSS tersebut akan diturunkan (inherit) kepada seluruh tag yang berada di dalam tag <div>, atau dengan kata lain kode CSS diatas, secara tidak langsung bermaksud:
<span id="c6tzq_4" class="c6tzq">color</span>:green;
}
div, div p, div p em {Namun tidak semua property CSS akan diturunkan dari tag induknya. Misalnya property border, hanya berlaku untuk satu tag induk saja.
color:green;
}
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.
Mengenal nilai property inherit
Untuk ‘memaksa’ proses penurunan, CSS memiliki nilai property inherit. Sebuah property jika diberi nilai inherit, property tersebut akan mencopy nilainya dari nilai property induk dari tag tersebut. Sebagai contoh, karena property border secara default tidak diturunkan, maka kita akan mencoba nilai inherit pada property border.
Contoh HTML yang akan kita gunakan adalah inherit.html:
<!<span id="c6tzq_12" class="c6tzq">DOCTYPE</span> html>Dari kode diatas dapat dilihat saya menggunakan dua kalimat yang memiliki class berbeda. Pada class=”satu”, saya hanya membuat property border dan color pada tag div.satu. namun keseluruhan kalimat akan memiliki warna biru (sesuai dengan sifat inheritance-nya), namun border hanya satu.
<html>
<<span id="c6tzq_7" class="c6tzq">head</span>>
<title>Contoh Inheritance dalam CSS</title>
<style type="text/css">
div.satu {
border: 1px <span id="c6tzq_3" class="c6tzq">solid</span> 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>
Pada kalimat kedua, saya menambahkan property inherit pada tag <p>, maka kalimat kedua tersebut akan memiliki 2 buah border, satu dari tag <div>, dan yang kedua dari tag <p>.
Sifat inheritance CSS ini akan memudahkan 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.
Misalkan kita ingin seluruh font berukuran 14px, maka kode CSSnya, cukup sebagai berikut:
<span id="c6tzq_6" class="c6tzq">body</span> {Sehingga seluruh tag yang berada di dalam tag body (hampir semua tag merupakan child dari tag body), ukuran fontnya akan berubah menjadi 14px.
font-size: 14px;
}
Selanjutnya, akan membahas tentang cara Penulisan Kode Warna pada CSS.
Sekian dan terima kasih.
No comments