The frame below shows examples of how the order of CSS rules can change the appearance of a web page, and also the demonstrates how the difference between background-color and background-image affects the page.
Each example uses one of two CSS files and one of two style blocks embedded in the <head> section of the pages used in the frame.
For example:
<head>
...
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {background-color: blue; }
p {color:#ff0000; }
</style>
</head>
The CSS blocks are:
<style type="text/css">
body {background-color: blue; }
p {color: #ff0000; }
</style><style type="text/css">
body {
background-color: blue;
background-image: url(/images/cyan.gif)
}
p {color: #ff0000; }
</style>
and the contents of the CSS files are:
body {background-color: green; }body {
background-color: green;
background-image: url('/images/tabs2.gif')
}