Terkadang kita menemui sebuah ketika dimana kita harus menciptakan sebuah elemen judul bersatu dengan tautan, namun keduanya harus tetap mempunyai warna yang sama. Bagian yang paling sering mendapat kondisi ibarat ini ialah ada pada bab header sebuah halaman web:
<header class="blog-header"> <h1 class="blog-title"> <a href="/">Blog Title</a> </h1> <p class="blog-slogan">Blog slogan goes here.</p> </header>Pada web-web standar, umumnya bab ini mempunyai sebuah perilaku yang unik, yaitu ketika seorang pengguna sedang berada di halaman muka, maka tautan tidak akan diterapkan pada judul tersebut, akan tetapi ketika pengguna tersebut sedang berada di halaman yang lain, maka tautan menuju halaman muka akan diterapkan pada judul tersebut. Seperti inilah kira-kira kondisinya:
<header class='blog-header'> <b:if cond='data:blog.url != data:blog.homepageUrl'> <h1 class='blog-title'> <a expr:href='data:blog.url'>Blog Title</a> </h1> <b:else/> <h1 class='blog-title'>Blog Title</h1> </b:if> <p class='blog-slogan'>Blog slogan goes here.</p> </header>Memastikan semoga warna elemen judul tetap sama di mana saja itu penting semoga semuanya terlihat konsisten. Katakanlah kita akan menciptakan warna judul blog di atas menjadi hijau:
.blog-header h1 {color:green}Ini akan berhasil kalau kita sedang berada di halaman depan. Judul halaman akan berwarna hijau. Akan tetapi ketika kita berpindah ke halaman lain, warna judul akan bermetamorfosis sama dengan warna tautan alasannya teks judul kini terbungkus oleh tautan yang posisinya berada di dalam elemen judul.
Untuk mengatasi persoalan tersebut, biasanya kita akan melaksanakan hal ini:
.blog-header h1 {color:green} .blog-header h1 a {color:green}Saya biasa menemui deklarasi CSS semacam itu pada judul-judul posting di dalam sebuah templat Blogger:
.post-title { font:normal normal 20px/1.4 "Open Sans",Sans-Serif; margin:0 0 .5em; text-shadow:none;color:#5686D6;} .post-title a, .post-title a:focus, .post-title a:hover, .post-title a:active {color:#5686D6; text-decoration:none; }Ini tidak efisien, alasannya kalau suatu hari nanti kita ingin mengganti warna elemen judul tersebut, maka kita harus mengubah isyarat warnanya sebanyak minimal dua kali. Seandainya jumlah deklarasi semacam ini cuma ada satu saja mungkin tidak masalah, tapi bagaimana kalau ada banyak? Apalagi kalau posisinya tidak berdekatan ibarat rujukan di atas. Mungkin posisi deklarasi warna elemen judul berada di sebelah sini dan posisi deklarasi warna tautan judul berada di sebelah sana. Pasti akan tambah susah lagi untuk mencarinya.
“Each property may also have a cascaded value of ‘inherit’, which means that, for a given element, the property takes the same specified value as the property for the element’s parent.” — CSS2 – The ‘inherit’ Value
Menggunakan nilai inherit dapat menjadi solusi. Dengan menuliskan nilai inherit pada properti CSS tertentu, maka nilai properti tersebut akan mengikuti nilai properti yang sama dari elemen induknya:
.blog-header h1 {color:green} .blog-header h1 a {color:inherit}Dengan begitu, setiap kali kita mengubah warna elemen judul pada rujukan di atas, maka warna tautan di dalamnya akan selalu mengikuti.
Contoh lain ada pada persoalan warna border. Terkadang kita menemui sebuah masalah dimana kita harus menciptakan sebuah tata letak halaman dengan beberapa border di dalamnya yang semua warnanya harus sama. Dengan memanfaatkan nilai inherit, kita dapat mewarnai semua border cukup pada elemen induknya saja:
Contoh lain lagi ialah mengenai cara paling efisien untuk mengubah tipe fon pada elemen-elemen formulir menjadi sama dengan tipe fon pada halaman:
button, input, select, textarea {font:inherit}