This paragraph belongs to the body. Any styles defined on the body
will cascade to this paragraph.
Now we're inside an article
. The background-color cascades from the
body
rule, but the cyan
color is overridden by the red color defined on the article
rule.
List 1
- This list is part of the host page.
- This list item is yellow because the page's stylesheet says list items should be yellow.
- This list item is green because it has
class="highlight"
, which overrides
the
cascaded style from the article
- This list item is magenta because it has
id="special"
, and
id
rules override class
rules.
- This list item is orange because it has an inline
style, which overrides any other
CSS rules.
List 2
Here are the CSS rules included in the style
element in the page head:
body {
background-color: black;
color: cyan;
}
article {
color: red;
border: 1px solid red;
padding: 10px;
}
ul li {
color: yellow;
}
ul li.highlight {
color: lime;
}
ul li#special {
color: magenta;
}
pre {
background-color: white;
color: black;
padding: 8px;
}