Penggunaan Attribut CSS Inheritance (Pewarisan)

Pada tutorial ini saya akan mencoba membahas tentang  Inheritance (Pewarisan). 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.

Coba perhatikan penulisan code css berikut :

.container {
font-family: Arial, Verdana, Helvetica;
font-size: 12px;
font-weight: bold;
color: #000;
}
.boxkanan {
font-family: Arial, Verdana Helvetica;
font-size: 12px;
font-weight: normal;
color: #FFF;
}

Jika kedua Kode Di atas di terapkan dalam TAG Berikut :

<div class="container "><div class="boxkanan"> Teks dalam Kotak
</div></div>

Maka itu adalah Inheritance, sehingga penulisan CSS nya dapat kita persingkat menjadi:

.container {
font-family: Arial, Verdana, Helvetica;
font-size: 12px;
font-weight: bold;
color: #000;
}
.boxkanan {
font-weight: normal;
color: #FFF;
}

(.container) merupakan parent dari (.boxkanan), maka bila terdapat properti dari (.boxkanan) yang sama parentnya sebaiknya tidak usah ditulis karena secara otomatis tag yang berada di bawah hirarki tag lain yang didefinisikan akan memiliki sifat yang sama. Dalam hal ini, font-family: Arial, Verdana, Helvetica; font-size: 12px; yang telah dimiliki (.container) secara otomatis telah dimiliki pula oleh (.boxkanan).

Inheritance berlaku tidak hanya pada tag yang memiliki class atau ID tetapi berlaku pula pada tag HTML yang tidak memiliki class atau ID. Hal ini merupakan keuntungan lain yang dapat kita manfaatkan. Tag HTML diatas dapat kita singkat menjadi:

<div class="container "><div>Teks dalam Kotak </div></div>

dan pada CSS dapat kita tulis:

.container {
font-family: Arial, Verdana, Helvetica;
font-size: 12px;
font-weight: bold;
color: #000;
}

.container div{
font-weight: normal;
color: #FFF;
}

Bila mana terdapat tag lain didalam tag HTML seperti:

<div class="container "><div>Teks dalam Kotak <span>Background</span>
<p>Teks lainnya</p> </div></div>

Kita tidak usah mendefinisikan setiap tag baru dengan memberi pengenal seperti ID atau Class, cukup parentnya saja. Sekali lagi, yang Anda perlukan hanya mengedit CSS nya.

.container {
font-family: Arial, Verdana, Helvetica;
font-size: 12px;
font-weight: bold;
color: #000;
}

.container div{
font-weight: normal;
color: #FFF;
}

.container div span {
background: #efefef;
}

.container div span p {
font-size: 10px;
font-weight: normal;
}

Efisiensi dapat kita lakukan bila kita menggunakan inheritance pada CSS dengan baik.