Untuk tutorial kali ini kita akan membahas mengenai inheritance atau biasanya kita kenal dengan nama penurunan sifat.
Penurunan dalam css ini terjadi pada property yang ditulis dalam kode css, untuk lebih lengkapnya kita akan bahas dalam tutorial dibawah ini.
Pengertian Inheritance dalam Kode CSS
Penurunan atau inheritance adalah fitur yang ada pada hampir seluruh bahasa pemrogaman termasuk CSS, Inheritance pada css akan menurunkan efek dari property css yang ditulis pada satu tag HTML ke tag HTML lainnya.
Penurunan property css akan berlaku jika terdapat tag didalam tag HTML lainnya, bagaimana apakah bingung ?? Perhatikan contoh dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Inheritance CSS</title>
</head>
<body>
<div>
<p><h1>Warung Belajar</h1> adalah situs belajar komputer</p>
</div>
</body>
</html>Contoh 1
Setiap kode html akan berada di antara tag <html> dan kode yang ditampilkan di browser tersebut pasti ditulis diantara tag <body>
perhatikan kode dibawah ini :
dari kode diatas terjadi beberapa penurunan :
- tag <html> adalah parent (induk) dari tag <body> karena tag <body> ditulis di antara tag <html></html>
- tag <div> adalah parent (induk) dari tag <p> karena tag <p> ditulis di antara tag <div></div>
- tag <p> adalah parent (induk) dari tag <h1> karena tag <h1> ditulis di antara tag <p></p>
itu adalah istilah dari parent tag html, jika dilihat dari sudut pandang child (anak) maka bisa diartikan seperti berikut ini :
- tag <body> adalah child (anak) dari tag <html>, karena tag <body> ditulis di antara tag <html></html>
- tag <p> adalah child (anak) dari tag<div>, karena tag <p> ditulis di antara tag <div></div>
- tag <h1> adalah child (anak) dari tag <p>, karena tag <h1> ditulis di antara tag <p></p>
Bagaimana teman – teman apakah sudah paham mengenai hal tersebut ??hubungan antara parent (induk) dan child (anak)
Lalu apa hubungannya inheritance dengan parent(induk) dan child(anak) ??
Jadi konsep parent dan child itu yang akan kita gunakan untuk menurunkan sifat dari property css, contohnya kita akan menambahkan kode css yang digunakan untuk memberikan warna merah pada tag <html>
<!DOCTYPE html>
<html>
<head>
<title>Inheritance CSS</title>
<style type="text/css">
html
{
color:red;
}
</style>
</head>
<body>
<div>
<p><h1>Warung Belajar</h1> adalah situs belajar komputer</p>
</div>
</body>
</html>Semisal kita simpan dengan nama inheritance_css.html, lalu kita buka di browser :
Hasilnya seluruh text menjadi warna merah, kenapa menjadi seperti itu ?? padahal yang kita beri kode css hanyalah selector tag <html> ??
Hal tersebut dikarenakan tag <html> adalah induk dari seluruh tag yang ditulis di file html tersebut, sehingga seluruh tag yang berada didalam tag <html> akan terkena effect property css yang ditulis dengan selector tag <html>, sehingga seluruh text menjadi warna merah.
Contoh Kedua
Dalam contoh kedua ini silahkan perhatikan kode dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Inheritance CSS</title>
<style type="text/css">
body
{
text-align:center;
}
div#pertama
{
color:red;
}
div#kedua
{
color:blue;
}
</style>
</head>
<body>
<div id="pertama">
<p>Paragraf Pertama - Warung Belajar adalah situs belajar komputer</p>
</div>
<div id="kedua">
<p>Paragraf Kedua - Warung Belajar adalah situs belajar komputer</p>
</div>
</body>
</html>semisal kita simpan dengan nama inheritance_css_2.html, lalu kita buka di browser maka hasilnya :
Penjelasan :
- Kedua paragraf berada di tengah, hal tersebut terjadi karena kita memberikan kode css dengan selector <body> dan memberikan property text-align:center; yang menyebabkan seluruh tag yang berada didalam tag <body> termasuk tag <p> pada paragraf pertama, dan tag <p> pada paragraf kedua, berada pada tengah browser.
- Paragraf pertama karena kita tulis di antara tag <div id=”pertama”> karena itu paragraf tersebut mendapatkan effect dari kode css yangmenggunakan selector div#pertama, hal tersebut dikarenakan tag <p> adalah child dari tag <div id=”pertama”>, sehingga warna textnya jadi merah
- Paragraf kedua karena kita tulis di antara tag <div id=”kedua”> sehingga mendapatkan effect dari kode css yang menggunakan selector div#kedua, karena tag <p> kedua adalah child dari tag <div id=”kedua”>, sehingga warna textnya jadi biru
Nilai Property Inherit
Setelah anda mengetahui bahwa effect property css bisa diturunkan, nah pertanyaannya apakah seluruh property css bisa diturunkan ??
ternyata ada beberapa property yang tidak bisa diturunkan, contohnya adalah property border, coba anda perhatikan skrip dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Inheritance CSS</title>
<style type="text/css">
div.pertama
{
color:red;
border:solid 1px black;
}
div.kedua
{
color:red;
border:solid 1px blue;
}
p.kedua
{
border:inherit;
}
</style>
</head>
<body>
<div class="pertama">
<p class="pertama">Paragraf Pertama - Warung Belajar adalah situs belajar komputer</p>
</div>
<br/>
<div class="kedua">
<p class="kedua">Paragraf Kedua - Warung Belajar adalah situs belajar komputer</p>
</div>
</body>
</html>semisal kita simpan dengan nama inheritance_css_3.html, lalu kita buka di browser :
Keterangan :
Pada paragraf pertama kita buat didalam tag <div> dengan class “pertama”, lalu pada css kita buat selector div.pertama yang kita set memiliki border berwarna hitam, yang menjadikan div dengan class pertama memiliki border berwarna hitam, tetapi untuk paragraf yang terdapat dalam div tersebut tidak memiliki border, hal tersebut dikarenakan property border tidak bisa diturunkan, Sehingga yang mendapatkan border hanya bagian parentnya saja.
Pada paragraf kedua kita buat didalam tag <div> dengan menggunakan class kedua, lalu kita berikan css dengan selector div.kedua untuk memberikan border warna biru, lalu kita buat juga css dengan selector p.kedua dengan attribute border dan nilai “inherit” yang menyebabkan paragraf kedua memiliki border berwarna birujuga, karena mendapatkan penurunan property dari parentnya yaitu tag <div class=”kedua”>
Jadi bisa disimpulkan untuk mendapatkan property yang memang tidak bisa diturunkan dari bagian parent (induk) kepada child (turunannya), child dapat menggunakan value inherit didalam property yang dituliskan.
Kurang Lebih seperti itu pembahasan mengenai sifat penurunan di css inheritance, dengan adanya inheritance akan mempermudah anda yang ingin memberikan effect pada keseluruhan tag html, tinggal menggunakan selector tag <html> maka seluruh objek didalam web akan mendapatkan effect dari penggunaan selector tersebut.
Baik itu dulu yang bisa bahas dalam tutorial mengenai inheritance dalam css, jika ada yang ingin didiskusikan silahkan di kolom komentar, sampai jumpa ditutorial css selanjutnya.