Save this file. Now imagine what will happen. In MyFirst.css, paragraph text is
supposed to be blue:
p
{
color: blue;
text-align: center;
font-family: arial!Important;
font-size:18.0pt!Important
}But MySecond.css specifies that paragraph text be maroon:
p
{
color: maroon;
text-align: center;
font-family: arial!Important;
font-size:18.0pt!Important
}What’s going to happen? Both of these selectors have the same “closeness”
(or specificity) to the HTML
tags in the .htm file because both are in
external files. Or do they have the same closeness after all? Does another
kind of closeness apply here as well? What do you suppose the color will be?
Load MyFirst.htm into IE to see which of these two external selectors domi-
nates. The text turns maroon. Why? Because the for the second .css
file is closer to the affected
elements in the HTML code. The second .css
file link appears lower in the header, therefore closer to the body of the docu-
ment where the
elements reside. If you switch the order of the
elements in the header, the text turns blue. Try switching the order like this
and then saving the .htm file and refreshing the browser:
<link type=”text/css” rel=”stylesheet” href=”MySecond.css”>
<link type=”text/css” rel=”stylesheet” href=”MyFirst.css”>What is the result? Blue.