HTML and CSS Reference
In-Depth Information
In case this isn't making much sense to you, let's look at an example.
Here's a basic style sheet:
p {
color: white;
background-color: black;
}
Let's link to it from the head of a document that also includes a
<style>
element:
<head>
<title>CSS Cascade 1</title>
<link href="style-1.css" rel="stylesheet">
<style>
p {
color: black;
background-color: white;
}
</style>
</head>
Notice that both the linked style sheet and the
<style>
element include
a declaration for the color of paragraph elements. Which one should
the browser use? The situation can be complicated further by adding a
style
attribute to a
<p>
element:
<p>A paragraph</p>
<p style="color: silver; background-color: gray;">
Another paragraph
</p>
As the screenshot shows, the browser
chooses the inline style on the element that
has one, rather than either of the styles in the
head or the linked style sheet. Inline styles
always override linked style sheets and styles
in the head; other rules are usually used in
reverse order to which they're encountered.
Try moving the
<link>
element after the
