GUI Pattern for showing that child is inheriting value from parent

Question

What is good GUI pattern for showing that a child is inheriting a value from its parent. In other words, if the user sets some value in the Parent, how would we indicate in the child that the value was set from the parent?

Parent  
| Value : Foo  
|  
|----Child  
       Value : Foo => inheriting value from parent.      

Answer 1

A lot depends on how interactive you'd like the different levels to be. More interactive (ability to change/override/etc), means making them stronger - less interactive (just for research purposes) - make them weaker.

If you're talking about displaying them all in a tree, then I'd actually leave the child with the same value and a label indicating "parent":

parent_div : width = 250
   |
   |-- child_div : Width = 250 ('parent_div')

If you're not showing them in a tree, then I'd display the value in some non-interactive way (I'm a fan of using a light grey, indented and italicized (i know that seems like overkill, but it's worth it)) - and then have a tooltip or mouseover that indicates where the original came from.

In either case, let me stress, it's INCREDIBLY valuable to have a direct link somewhere that gets you to the point where the value was set to begin with. It's so annoying to have to try to manually navigate there.

For an example I quite like, let me point at the Trace Styles tool in IE8 - tells me EXACTLY where the style came from (and lets me edit all the way up the chain) - Convenient!

IE 8 SS http://img101.imageshack.us/img101/3172/captureri.png

Answer 2

Leave it at book or regular weight, and make values modified in the child bold weight.