HTML and CSS Reference
In-Depth Information
The rule with the highest score wins. This means that in our case, the color selected would
be red, since the ID based rule is awarded 100 points. This process is referred to as “speci-
ficity”.
This is already getting complex, but unfortunately it gets even more complex.
Rules can be specified in 3 different ways:
1. We can create an external CSS file, and import it into the HTML file.
2. We can create styles “inline” in the HTML document by placing them between
<style></style> tags.
3.
We
can
specify
styles
directly
on
an
element,
for
instance,
<footer
style=”color:blue;font-size:12pt”>
Any styles assigned specifically on the element are awarded an extra 1000 points, meaning
they will almost always override any other styles.
Even after applying all these rules, it is possible that two rules will have the same
specificity. In this case, the one defined last will win. This means that rules inside
<style></style> blocks override those defined in external CSS files, and if multiple rules in
the same CSS file have the same specificity, the last rule, in the last file listed is the winner.
Finally, if you are unable to increase the specificity of a rule sufficiently to trump another
rule, but have one or more styles that should never be overridden, you can use the
!import-
ant
flag. When this is used only inline styles will be able to override the style:
.myfooter {
color:blue !important;
}
In general it is best not to have to rely on this setting.
