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;
}