Inheritance
When one element is contained within another, with the exception of tables
in Netscape 4, it will inherit properties from the container. The classic
example is an emphasis contained within a header.
| this HTML markup |
renders like this |
| <h1>Style sheets <em>rule!</em></h1> |
Style sheets rule!
|
The emphasized text will be rendered in italics, but have the same typeface,
color, background, etc, as the rest of the header. We can override this
default by specifying the behavior of the EM tag when it is
used within an H1 tag.
| this CSS Markup |
renders like this |
| H1 EM { color: red } |
|
Here, the EM is separated from the H1 by a space
rather than by a comma as in the previous example. This is called a contextual
selector. It defines a rule for the EM tag when used in the
context of an H1 tag. Another common application of contextual
selectors is to specify the list style for nested lists. In this next example,
an OL tag by itself produces a list with a decimal numbering
scheme. When an OL tag is used within the context of another
OL tag, lowercase roman numerals are used. And when an OL
tag is used within two OL tags, the different list items are
denoted with lowercase alphabetic characters.
| with this style rule: |
|
OL {
list-style: decimal
}
OL OL {
list-style: lower-roman
}
OL OL OL {
list-style: lower-alpha
} |
| this HTML markup |
renders like this |
|
<ol>
<li> This is an item
<ol>
<li>This is an item in a sublist
<li>And another item
</ol>
<li> And another item for the top level
<li> Still more items
<ol>
<li> More items in another sublist
<li> And more
<li> And now let's add another sublist
<ol>
<li> Now we are three lists deep
<li> We want these to be marked with lowercase letters
</ol>
</ol>
</ol>
|
- This is an item
- This is an item in a sublist
- And another item
- And another item for the top level
- Still more items
- More items in another sublist
- And more
- And now let's add another sublist
- Now we are three lists deep
- We want these to be marked with lowercase letters
|
|
