Inheritance CSS atau Penurunan Style

Sebelumnya kita sudah bahas fungsi important pada CSS. Kali ini kita bahas inheritance CSS atau penurunan style pada element HTML tertentu. Bagaimana penjelasannya? Simak pembahasan AneIqbal selengkapnya berikut ini.

Penurunan style atau CSS inheritance

Adalah penurunan style dari elemen HTML ke elemen HTML lain yang berada di dalamnya.

..sehingga, style dari elemen HTML yang dibungkus oleh elemen HTML di atasnya akan memiliki style yang sama dengan elemen HTML di atasnya.

Catatan: Dalam sebuah file HTML, semua elemen HTML akan dibungkus oleh elemen html dan semua yang tampil di web browser dibungkus oleh elemen body.

Elemen HTML terluar atau pembungkus disebut sebagai induk (parent). Elemen HTML yang dibungkus oleh elemen parent disebut sebagai anak (child). Elemen HTML yang dibungkus oleh elemen child dan parent disebut sebagai cucu (grandchild).

Contoh kode HTMLnya:


<!DOCTYPE html>

<html>
  <head>
    <title>CSS Inheritance</title>
    <link rel="stylesheet" href="inheritance.css" />
  </head>
  
  <body>
    <div>
       <p>Halo.. ini adalah sebuah kalimat..</p>
    </div>
  </body>
</html>

Contoh kode CSSnya:

body {
  color: blue;
}

Jika kita memberi style teks berwarna biru ke selector body, maka paragrafnya juga akan berwarna biru, karena style dari induk diturunkan ke anak dan juga ke cucunya.

  • ..elemen body adalah induk.
  • ..elemen div adalah anak dari elemen body.
  • ..elemen p adalah cucu dari elemen body dan anak dari elemen div.
inheritance css
hasil outputnya

Tapi, ada tapinya nih.

Nggak semua property CSS bisa diturunkan ke elemen anak dan cucunya. Property color pada kode CSS di atas adalah salah satu yang bisa diturunkan stylenya.

Salah satu property CSS yang tidak bisa diturunkan yaitu property border, style property border hanya berlaku di elemen induk saja.

Mari kita coba untuk membuktikan.

Buat file not-inheritance.html dengan isi kode:

<!DOCTPYE html>
<html>
  <head>
    <title>CSS Not Inheritance</title>
    <link rel="stylesheet" href="not-inheritance.css" />
  </head>

  <body>
    <div>
      <p>Halo.. ini adalah paragraf</p>
    </div>
  </body>
</html>

Lalu file not-inheritance.css..

div {
  border: 1px solid blue;
  color: red;
}

Hasilnya seperti ini..

css color inherit
hasil outputnya

Terbukti kan, property border pada elemen div tidak menurunkan style bordernya ke elemen p, yang menurunkan stylenya adalah property color.

Lalu, gimana supaya paragraf (elemen p) di atas punya garis biru seperti elemen div? disinilah peran dari nilai property: inherit.

Mengenal nilai property: inherit

Nilai inherit pada property akan menyalin style dari elemen induknya sekalipun propertynya tidak bisa menurunkan stylenya ke elemen anaknya (contoh property di atas adalah property border).

Supaya paragraf pada pembuktian di atas juga memiliki garis berwarna biru seperti elemen induknya (elemen div), kita gunakan nilai inherit di property bordernya, seperti ini:

div {
  border: 1px solid blue;
  color: red;
}

p {
  border: inherit;
}

Dan hasilnya..

css inheritance
hasil outputnya

Paragraf (elemen p) punya garis biru yang sama dengan elemen induknya (elemen div).

Keuntungan CSS inheritance

Kita jadi sangat terbantu dengan adanya CSS inheritance ini dalam pendesainan tampilan web. Karena cukup dengan memberi style ke elemen induknya, maka elemen yang ada di dalamnya juga ikut berubah.

Kalo nggak ada CSS inheritance ini, waduh, sulit dibayangkan. Kita harus beri style 1 per 1 di tiap elemen padahal style yang ingin ditampilkan sama.

Sampai sini selesai sudah pembahasan kita kali ini tentang penurunan style CSS atau CSS inheritance.

Selanjutnya, kita akan bahas apa saja satuan CSS yang ada.

Leave a Comment