09 - Mengenal Sifat Penurunan Dalam Css (Inheritance)
Dalam tutorial berguru CSS kali ini kita akan membahas wacana dampak penurunan property di dalam CSS, atau lebih terkenal dengan kata inggrisnya “inheritance” dalam CSS. Tutorial ini mungkin terkesan agak ‘rumit’, namun merupakan salah satu poin penting dalam memahami CSS.
Pengertian Inheritance dalam CSS
Inheritance dalam CSS yaitu sifat penurunan dampak 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 penggalan HTML berikut ini:
1 | <div><p>Saya sedang berguru <em>inheritance</em> CSS</p></div> |
Dari teladan diatas, tag <p> berada di dalam tag <div>, sehingga sanggup dikatakan tag <div> yaitu 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 menciptakan instruksi CSS sebagai berikut:
1 2 3 | div {color:green;} |
Maka dampak dari instruksi CSS tersebut akan menciptakan seluruh text di dalam tag <div> akan berwarna hijau, walapun di dalam tag <div> juga terdapat tag-tag lainnya. Dapat dikatakan bahwa dampak 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.
Mengenal Nilai Property: inherit
Untuk ‘memaksa’ proses penurunan, CSS mempunyai nilai property: inherit. Jika sebuah instruksi CSS mempunyai nilai property inherit, maka property tersebut akan mencopy nilai dari tag induk (parent).
Sebagai contoh, alasannya yaitu property border secara default tidak diturunkan, maka kita akan mencoba nilai inherit pada property border.
Contoh HTML yang akan kita gunakan yaitu inherit.html:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!DOCTYPE html><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 memakai <em class="dua">nilai property inherit</em> CSS </p> </div></body></html> |
Dalam teladan instruksi HTML diatas, saya memakai dua kalimat yang mempunyai nama class yang berbeda, yakni class satu dan class dua.
Pada class=”satu”, saya hanya menciptakan property border dan color pada tag div.satu. Karena prinsip inheritance dalam CSS, seluruh kalimat pada tag <div> yang mempunyai class=”satu” akan berwarna biru (sesuai dengan sifat inheritance-nya), namun dampak 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 menciptakan tag <p> juga mempunyai border yang sama dengan yang didefenisikan pada tag induknya.
Sifat inheritance CSS ini akan memudahkan dalam desain web, alasannya yaitu kalau kita ingin menciptakan seluruh goresan pena menjadi warna dan ukuran tertentu, cukup dengan menciptakan style untuk tag induk, maka seluruh tag yang berada di dalamnya akan ikut berubah.
Misalkan kita ingin seluruh font berukuran 14px, maka instruksi CSSnya, cukup dengan:
Dan seluruh tag yang berada di dalam tag body (hampir semua tag merupakan child dari tag body), ukuran fontnya akan menjelma 14px.
Dalam tutorial CSS berikutnya, kita akan membahas wacana cara Penulisan Kode Warna pada CSS.
Dosen Desain Web | Muqorobin, S.Kom
