Cascading Style Sheets - HTML5 with Visual Studio 2012 - page 80

In addition, consider that even within a single style sheet there may be conflicting declaration. For example,
a style sheet may include the following:

p
{
color: black;
}

header p
{
color: red;
}

A p element within a header element is selected by both rules so which one is used. In this case the
specificity rule applies which states that the more specific selector is used, which is the header p selector. With
all the selectors that are available, determining which one is more specific is not as straightforward as you might
think. ID selectors are considered more specific than class or attribute selectors, which are more specific than
element selectors. If there are only element selectors, the rule with the most elements takes precedence so
header p , which contains two elements, is more specific than just p .
Finally, what if the same exact selector is used twice in the same style sheet with different declarations? For
example, if p { color:black; } appears in the style sheet and later p { color:green } appears. In this case,
the rule that appears last takes precedence, so you'll have green text.

Using the Important Keyword
The one sort of “ace-in-the-hole” is the important keyword. If this is used in a style rule, this trumps all other
rules. You can add the important keyword like this:
p
{
color: red;
!important;
}

If two conflicting rules both have the important keyword then the precedence is determined based on the
rules I already mentioned. There is one significant difference, however. Normally rules in the author style sheet
override rules in the user style sheet. If they have the important keyword this is reversed, the user style sheet
will override the author rules. That may seem odd at first but this has a very important application. This allows
the user to override the author styles for certain properties. For example, someone who is visually impaired may
need to increase the font size. The important tag will ensure that this style does not get overridden.

■ you might be tempted to use the important keyword to make a quick fix and override a cascaded style
rule. With all the precedence rules that i just described, you shouldn't need to do this. i recommend using this as a
last resort. Overuse of the important keyword can make your style sheets difficult to maintain.

Caution

Creating a Web Page
For the rest of this chapter I will show you how to build a single web page that will demonstrate many of the new
CSS features. To keep the project simple, I will be using the Web Matrix application instead of Visual Studio to
create a single web page. The style rules will use the internal style element so everything can be placed in a
single file. The small amount of JavaScript will also be included in the single file.