The rules of cascading stylesheets are far cleverer than the type of cascading I mention above, because they include the idea of inheritance – if you really want to understand CSS you also need to understand inheritance – it is a vital part of the whole.
It is normally fairly easy to guess the way HTML entities are related together, for example, it is fairly easy to guess that <td> probably inherits its attributes from <table> so if I set
table{font-family:Arial}
it is fair to assume that <td> will inherit arial font.
It is equally pretty fair to assume that most entities inherit from <body> simply because the <body> tag nests all entities in an HTML document, so if I set
body{font-family: Arial, Helvetica, "sans serif"; }
it is fair to assume that Arial will be the default font for any document including that stylesheet.
But this is an assumption that is only safe in certain contexts. The diagram below outlines a tree structure for an HTML document. The section is taken from Lie and Boss
http://www.w3.org/Style/LieBos2e/enter/
“The tree structure of this document is:
![[image]](/cm/styles/howson.net/images/manual_clip_image001.gif)
Through inheritance, CSS property values set on one element will be transferred down the tree to its descendants. For example, our examples have up to now set the colour to be green for h1 and h2 elements. Now, say, you would like to set the same colour on all elements in your document. You could do this by listing all element types in the selector:
<STYLE TYPE="text/css">
H1, H2, P, LI { color: green }
</STYLE>
However, most HTML documents are more complex than our sample document, and your stylesheet would soon get very lengthy. There is a better - and shorter - way. Instead of setting the style on each element type, we set it on their common ancestor, the body element:
<STYLE TYPE="text/css">
BODY { color: green }
</STYLE>” Lie and Boss Chapter 2
 It is easy to believe that “somebody up there” has it in for you when working with CSS and inheritance, because not all attributes inherit, and sometimes things inherit that you wish wouldn’t. Background image does not inherit – and this is good. However, margin and padding seem to inherit depending on browser ‘mood’ or time of day – or perhaps a mixture of these. In fact there is a set of rules, these rules relate to the box model used by CSS.
The place to start learning about margins and padding is in http://www.w3.org/TR/REC-CSS2/box.html
A common work around for problems related to box model is by setting the margin and padding of all elements to zero then overriding this setting as needed this can be achieved as follows:
*{margin: 0px; padding: 0px; border: 0px;}
(note use of the wildcard *).
This little trick transformed my life when working with CSS and avoided many white hairs. It just says - set a margin, border and padding of zero pixels for all elements!
There are some notable downsides to doing this and you need to be aware of them – for example, forms loose default buttons etc when you set borders and margins to zero, also borders disappear from text boxes making them invisible. But if you intend to define your own text boxes and buttons anyway then it is fine to start with everything set to zero. Another and perhaps better idea is to set all the margins and borders for a single DIV layer to zero. This can be achieved as follows:
#layername * {margin: 0px; padding: 0px; border: 0px;}
It is worth noting that in the inheritance hierarchy <div> is one stage below <body> and above elements such as <p> and <li>. So if you use a layer everything nested within that layer inherits its attributes.
Inheritance diagram – note that DIV is the next element after BODY
|
