Tutorial CSS untuk Pemula: Penurunan Style CSS atau CSS Inheritance



Halo gan. Di postingan sebelumnya, kita sudah membahas perintah dan fungsi !important CSS. Ternyata perintah !important ini akan mengabaikan style prioritas selector CSS.

..sehingga perintah !important ini hanya boleh digunakan jika sudah sangat terpaksa.

Kali ini, kita akan bahas penurunan style CSS atau biasa disebut dengan CSS inheritance.

css inheritance

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.

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.

css inheritance

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 inheritance


Baca juga ya..
Tutorial Coloring CSS: Mengenal Color Names
Tutorial Coloring CSS: Mengenal RGB dan RGBA Color
Cara Merename atau Mengubah Nama Banyak File di Windows dengan Mudah dan Cepat

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

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.

Next, kita akan bahas satuan value yang ada di CSS.



Tag : Tutorial CSS
0 Komentar untuk "Tutorial CSS untuk Pemula: Penurunan Style CSS atau CSS Inheritance"