Sifat Penurunan Dalam CSS (Inheritance)

belajar HTML dan CSS untuk pemula

Pengertian Inheritance dalam CSS

Inheritance dalam CSS ialah sifat penurunan efek CSS dari sebuah tag HTML kepada tag HTML lainnya. Syarat untuk inheritance ialah: tag itu harus berada di dalam tag lainnya.

Di dalam HTML, setiap tag umumnya akan berada pada tag lain. Untuk seluruh tag HTML, akan berada di dalam tag <html>, dan untuk seluruh tag yang muncul di web browser akan ada di dalam tag <body>.

Sebagai contoh, perhatikan potongan HTML berikut ini:

<div><p>Saya sedang belajar <em>inheritance</em> CSS</p></div>

Dari contoh diatas, tag <p> berada di dalam tag <div>, sehingga bisa dikatakan tag <div> ialah induk (parent) dari tag <p>. Sedangkan tag <em> yang ada di dalam tag <p> merupakan anak (child) dari tag <p> dan grandchild dari tag <div>.

Bila kita membuat kode CSS sebagai berikut:

div

Maka dampak dari kode CSS itu akan membuat semua text di dalam tag <div> akan berwarna hijau, walapun di dalam tag <div> juga ada tag-tag lainnya. Bisa dikatakan bahwa efek CSS itu diturunkan (inherit) dari tag induk <div> kepada tag anak <p> dan <em>.

Tetapi harus diperhatikan bahwa tidak seluruh property CSS akan diturunkan dari tag induknya. Contohnya property border, cuma berlaku untuk satu tag induk saja dan tak akan diwariskan kepada tag anak.

Property seperti background-color yang dipakai untuk merubah warna latar belakang sebetulnya juga tidak diturunkan, tetapi ‘seakan-akan’ diturunkan. Hal ini terjadi sebab nilai ‘default’ dari property background-color ialah ‘transparent’, dimana warna latar belakang tag induk akan dilewatkan, sehingga seakan-akan juga bewarna seperti induknya.

Mengenal Nilai Property: inherit

Untuk ‘memaksa’ proses penurunan, CSS mempunyai nilai property: inherit. Bila sebuah kode CSS mempunyai nilai property inherit, maka property itu akan mencopy nilai dari tag induk (parent).

Sebagai contoh, sebab property border secara default tidak diturunkan, maka kita akan mencoba nilai inherit pada property border.

Contoh HTML yang akan kita pakai ialah inherit.html:

<!DOCTYPE html>
<html>
<head>
   <title>Contoh Inheritance dalam CSS</title>
   <style type="text/css">
      div.satu 

      div.dua 
      p.dua 
    </style>
</head>

<body>
   <div class="satu">
     <p class="satu">
      Kalimat ini tanpa <em class="satu">nilai property inherit</em> CSS
     </p>
   </div>
   <br />
   <div class="dua">
     <p class="dua">
       Kalimat ini memakai <em class="dua">nilai property inherit</em> CSS
     </p>
   </div>
</body>
</html>

Pada contoh kode HTML diatas, saya memakai dua kalimat yang mempunyai nama class yang berbeda, yaitu class satu dan class dua.

Pada class=”satu”, saya cuma membuat property border dan color pada tag div.satu. Sebab prinsip inheritance dalam CSS, semua kalimat pada tag <div> yang mempunyai class=”satu” akan berwarna biru (sesuai dengan sifat inheritance-nya), tetapi efek border tidak diwariskan kepada tag <p>.

Pada class=”dua”, saya menambahkan nilai inherit untuk property border pada tag <p>. Hasil dari nilai inherit ini akan membuat tag <p> juga mempunyai border yang sama dengan yang didefenisikan pada tag induknya.

Sifat inheritance CSS ini akan mempermudah dalam desain web, sebab bila kita mau membuat semua tulisan jadi warna dan ukuran tertentu, cukup dengan membikin style untuk tag induk, maka seluruh tag yang ada di dalamnya akan ikut berubah.

Misalnya kita mau seluruh font berukuran 14px, maka kode CSSnya, cukup dengan:

body

Dan seluruh tag yang ada di dalam tag body (hampir seluruh tag merupakan child dari tag body), ukuran fontnya akan berganti jadi 14px.


Butuh Web Developer Makassar atau Jasa SEO di Makassar yang bergaransi? Jangan ragu dengan infanthree.com. Kami juga penyedia Jasa Pembuatan Aplikasi Android di Makassar yang terkemuka. Selain itu ada layanan SEM, SMM, Internet Marketing Agency Makassar dan Social Media, Pembuatan Logo, Konten, Video, Maskot dan Instalasi jaringan ataupun mikrotik, hingga pelatihan komputer dan internet marketing.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

WhatsApp chat