Try removing the inline style to see what happens. Change the line to
<p>I guess I’m blue. </p>Retest it by resaving the Notepad file you just modified.
No need to double-click again on this filename in Windows Explorer to load
the new version into IE. After you’ve loaded a document, it’s the default
address in IE — in this case, an address of an .htm file on your hard drive.
If you modify that file as you just did in this example, all you have to do to
see the modification is to press F5. That “refreshes” IE.
Some people prefer to use the browser’s built-in source view as a quick way
of modifying and retesting CSS code. Choose View➪Source. You can make
changes to the code, and then save it. Both Netscape and Firefox highlight
the syntax, which some programmers find useful.
After you load the new version of this document into IE, the line I guess I’m
blueis now displayed in red. The conflict between the embedded and inline
style definitions has been resolved because you deleted the inline style.
You can override the normal rules of priority by using the !Important
command to specify that this style must be used, no matter what. An
!Importantdeclaration overrides all other style definitions. You add the
command like this:
p {color: blue !important;}In CSS1, styles declared important by the author of the Web page override
even any styles that the reader has declared important (yes, a Web page
reader can specify styles too, as you see later in this book). However, in CSS2,
important reader styles win out over important author styles, and indeed
over any author styles, whether marked important or not.
Understanding CSS specificity ...........................................................
The term specificityis also used to describe a second way that a browser cal-
culates which style wins when styles conflict. First, the browser looks for
closeness — but what if the closeness is identical? That’s when this second
technique is applied.
Imagine, for example, that two different style sheets are referenced by the
same HTML document (yes, you can attach more than on CSS file to a given
Web page’s HTML code). But, in one of these sheets, H1 is styled bold, and in
another sheet it’s styled italic. What’s the poor browser to do in this case?
Which specification wins?