Iklan bawah header

Belajar CSS : Mengenal Sifat Penurunan Property (inheritance) dalam CSS

Inheritance

Pada pembahasan kali ini kita akan belajar mengenai efek penurunan property di dalam CSS, atau lebih dikenal dengan istilah "inheritance" dalam CSS. di dalam pembahasan kali ini mungkin akan terlihat sedikit rumit, namun apa yang dibahas kali ini merupakan salah satu poin penting dalam memahami CSS.

Inheritance adalah sifat penurunan efek css dari sebuah tag html kepada tag html lainnya atau bisa dikatakan tag tersebut berada di dalam tag lainnya.

Umumnya setiap tag dalam HTML akan berada di dalam tag lainnya. misalnya untuk seluruh tag html akan berada di dalam tag <html> dan untuk seluruh tag yang akan ditampilkan pada browser akan berada di dalam tag <body>.

Bisa kalian perhatikan contoh dibawah ini:


<div><p>Pembahasan saat ini mengenai <em>inheritance</em> CSS</p></div>

Dari contoh diatas, tag <p> berada di dalam tag <div>, jadi dapat dikatakan bahwa tag <div> adalah induk (parent) dari tag <p>. Sedangkan untuk tag <em> yang berada di dalam tag <p> bisa dikatakan sebagai anak (child) dari tag <p> dan grandchild dari tag <div>.

Jika kita padukan dengan code css berikut ini :


div {
color: blue;
}

Maka efek yang dihasilkan dari kode css tersebut akan membuat seluruh teks yang berada di dalam tag <div> akan berwarna biru, meskipun di dalam tag div juga terdapat tag-tag lainnya. Jadi bisa dikatakan bahwa efek css tersebut diturunkan (inherit) dari tag induk <div> kepada tag anak <p> dan <em>.

Namun perlu kalian ketahui juga bahwa tidak semua property css akan diturunkan dari tag induknya. Misalnya saja seperti tag border, hanya berlaku untuk satu tag induk saja dan tidak diturunkan kepada tag anak.

Mengenal Nilai Property inherit

CSS memiliki property inherit yang digunakan untuk memaksa proses penurunan, jadi jika sebuah kode css memiliki nilai property inherit, maka property tersebut akan mencopy nilai dari tag induk.

Karena property border secara default tidak akan diturunkan, maka kita akan mencoba menggunakan nilai inherit pada property border.

Perhatikan contoh berikut :

<!DOCTYPE html>
<html>
<head>
   <title>Contoh Inheritance dalam CSS</title>
   <style type="text/css">
      div.contoh1 {
            border: 1px solid black;
            color: blue;
      }
 
      div.contoh2 {
            border: 1px solid black;
      }
      p.contoh2 {
            border: inherit;
      }
    </style>
</head>
 
<body>
   <div class="contoh1">
     <p class="contoh1">
      Kalimat ini tanpa <em class="contoh1">nilai property inherit</em> CSS
     </p>
   </div>
   <br />
   <div class="contoh2">
     <p class="contoh2">
       Kalimat ini menggunakan <em class="contoh2">nilai property inherit</em> CSS
     </p>
   </div>
</body>
</html>
Contoh inheritance

Dari contoh diatas, terdapat dua kalimat yang memiliki nama class yang berbeda, yakni clas contoh1 dan class contoh2.

Pada class="contoh1", menggunakan property border dan color pada tag div.contoh1. Karena prinsip inheritance, seluruh kalimat pada tag div yang memiliki class="contoh1" akan berwarna biru, namun efek border tidak diturunkan kepada tag p.

Pada class="contoh2", menggunakan nilai inherit untuk property border pada tag p. Hasil dari nilai inherit ini akan membuat tag p juga memiliki border yang sama dengan yang didefinisikan pada tag induknya.

Demikianlah pembahasan mengenai sifat penurunan dalam CSS (inheritace). Semoga bermanfaat.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel