DesignMagz

Memahami Inheritance pada CSS

CSS memperkenalkan Disainer Web pada istilah inheritance atau pewarisan. Inheritance juga membuat penulisan kode CSS menjadi lebih ringkas dan mengurangi pengulangan penulisan.

Berdasarkan artinya, inheritance atau pewarisan adalah sifat pengaturan properti yang dimana ia diterapkan pada sebuah tag, maka tag-tag lain yang berada diantara tag (atau dalam hirarki) tersebut akan memiliki sifat yang sama pula. Perhatikan kode css yang diterapkan pada tag Div berikut:


<div style="color:Red">Bapaknya
  <p>Anak
</p>
  <span>Anak</span>
</div>


Struktur hirarki dapat kita lihat pada gambar dibawah:

Maka bila dilihat di browser, tampilan tag diatas akan menjadi:

pada contoh diatas, Div menjadi parent dari P dan Span, dengan demikian bila kita mendefinisikan properti yang memiliki sifat inherit maka sifat yang sama selain berlaku pada parent juga berlaku pada turunannya. Bila tag diatas kita tambahan tag baru dibawah P:

<div style="color:Red">Bapaknya
  <p>Anak <span>cucu</span> </p>
  <span>Anak</span>
</div>

Maka tampilan di browser menjadi:

Inheritance pada CSS akan tetap berlaku pada tag-tag yang berada pada turunannya apabila tidak didefinisikan. Pada contoh diatas, kita akan menambahkan properti pada Span cucu:

<div style="color:Red">Bapaknya
<p>Anak <span style="color:Blue">cucu</span> </p>
<span>Anak</span>
</div>

Tidak seluruh properti yang dimiliki CSS memiliki sifat inherit, tapi banyak dari properti CSS memiliki sifat ini. Contoh properti yang memiliki sifat inherit adalah:

Font, (font-family, font-weight, dll)
Color,
text-align,
text-decoration,
dan lain-lain

sedangkan yang tidak memiliki sifat inherit:

Width,
Height,
Border,
Z-Index,
Float,
dan lain-lain,


Inheritance pada CSS dapat kita manfaatkan untuk efisiensi dan penghematan filesize CSS Anda, kita akan membahasnya pada tulisan selanjutnya.