The inherit CSS keyword causes the element for which it is specified to take the computed value of the property from its parent element. It can be applied to any CSS property, including the CSS shorthand all.
For inherited properties, this reinforces the default behavior, and is only needed to override another rule.
Inheritance is always from the parent element in the document tree, even when the parent element is not the containing block.
h2 { color: green; } #sidebar h2 { color: inherit; }
In this example the h2 elements inside the sidebar might be different colors. For example, if one of them were the child of a div matched by the rule ...
div#current { color: blue; }
... it would be blue.
| CSS Cascading and Inheritance Level 3 # inherit |
BCD tables only load in the browser
See also
- Inheritance
- Use initial to set a property to its initial value.
- Use unset to set a property to its inherited value if it inherits, or to its initial value if not.
- Use revert to reset a property to the value established by the user-agent stylesheet (or by user styles, if any exist).
- The all property lets you reset all properties to their initial, inherited, reverted, or unset state at once.
The height CSS property specifies the height of an element. By default, the property defines the height of the content area. If box-sizing is set to border-box, however, it instead determines the height of the border area. The min-height and max-height properties override height.
height: 120px;
height: 10em; height: 75%; height: max-content;
height: min-content;
height: fit-content(20em);
height: auto; height: inherit;
height: initial;
height: revert;
height: unset;
<length> Defines the height as an absolute value. Defines the height as a percentage of the containing block's height. The browser will calculate and select a height for the specified element. The intrinsic preferred height. The intrinsic minimum height. Box will use the available space, but never more than max-content Uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, <length-percentage>)) Enables selecting a middle value within a range of values between a defined minimum and maximum
<div id="taller">I'm 50 pixels tall.</div> <div id="shorter">I'm 25 pixels tall.</div> <div id="parent"> <div id="child"> I'm half the height of my parent. </div> </div>
div { width: 250px; margin-bottom: 5px; border: 2px solid blue; } #taller { height: 50px; } #shorter { height: 25px; } #parent { height: 100px; } #child { height: 50%; width: 75%; }
| CSS Box Sizing Module Level 3 # preferred-size-properties |
BCD tables only load in the browser
See also
Dalam tutorial belajar CSS kali ini kita akan membahas tentang efek penurunan property di dalam CSS, atau lebih populer dengan kata inggrisnya “inheritance” dalam CSS. Tutorial ini mungkin terkesan agak ‘rumit’, namun merupakan salah satu poin penting dalam memahami CSS.
Pengertian Inheritance dalam CSS
Inheritance dalam CSS adalah sifat penurunan efek CSS dari sebuah tag HTML kepada tag HTML lainnya. Syarat untuk inheritance adalah: tag tersebut harus berada di dalam tag lainnya.
Di dalam HTML, setiap tag umumnya akan berada di dalam tag lain. Untuk seluruh tag HTML, akan berada di dalam tag <html>, dan untuk seluruh tag yang tampil di web browser akan berada 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 dapat dikatakan tag <div> adalah induk (parent) dari tag <p>. Sedangkan tag <em> yang berada di dalam tag <p> merupakan anak (child) dari tag <p> dan grandchild dari tag <div>.
Jika kita membuat kode CSS sebagai berikut:
div { color:green; }Maka efek dari kode CSS tersebut akan membuat seluruh text di dalam tag <div> akan berwarna hijau, walapun di dalam tag <div> juga terdapat tag-tag lainnya. Dapat dikatakan bahwa efek CSS tersebut diturunkan (inherit) dari tag induk <div> kepada tag anak <p> dan <em>.
Namun perlu diperhatikan bahwa tidak semua property CSS akan diturunkan dari tag induknya. Misalnya property border, hanya berlaku untuk satu tag induk saja dan tidak akan diturunkan kepada tag anak.
Mengenal Nilai Property: inherit
Untuk ‘memaksa’ proses penurunan, CSS memiliki nilai property: inherit. Jika sebuah kode CSS memiliki nilai property inherit, maka property tersebut akan mencopy nilai dari tag induk (parent).
Sebagai contoh, karena property border secara default tidak diturunkan, maka kita akan mencoba nilai inherit pada property border.
Contoh HTML yang akan kita gunakan adalah inherit.html:
<!DOCTYPE html> <html> <head> <title>Contoh Inheritance dalam CSS</title> <style type="text/css"> div.satu { border: 1px solid black; color: blue; } div.dua { border: 1px solid black; } p.dua { border: inherit; } </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 menggunakan <em class="dua">nilai property inherit</em> CSS </p> </div> </body> </html>Dalam contoh kode HTML diatas, saya menggunakan dua kalimat yang memiliki nama class yang berbeda, yakni class satu dan class dua.
Pada class=”satu”, saya hanya membuat property border dan color pada tag div.satu. Karena prinsip inheritance dalam CSS, seluruh kalimat pada tag <div> yang memiliki class=”satu” akan berwarna biru (sesuai dengan sifat inheritance-nya), namun efek border tidak diturunkan 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 memiliki border yang sama dengan yang didefenisikan pada tag induknya.
Sifat inheritance CSS ini akan memudahkan dalam desain web, karena jika kita ingin membuat seluruh tulisan menjadi warna dan ukuran tertentu, cukup dengan membuat style untuk tag induk, maka seluruh tag yang berada di dalamnya akan ikut berubah.
Misalkan kita ingin seluruh font berukuran 14px, maka kode CSSnya, cukup dengan:
body { font-size: 14px; }Dan seluruh tag yang berada di dalam tag body (hampir semua tag merupakan child dari tag body), ukuran fontnya akan berubah menjadi 14px.
Dalam tutorial CSS berikutnya, kita akan membahas tentang cara Penulisan Kode Warna pada CSS.
Jika anda ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih lengkap, mulai dari dasar hingga fitur terbaru CSS3 seperti animasi dan web responsive. Penjelasan lebih lanjut bisa ke: eBook CSS Uncover Duniailkom.