HTML and CSS Reference
In-Depth Information
Given that many rules may be applied at once, the final style applied to a particular
element may not be immediately obvious. In fact, in quite a number of cases, the properties
affecting an element's look may be inherited from an enclosing parent element. As a very
simple example, consider the following rules:
<style type="text/css">
body {background-color: white; color: black;}
p {font-family: Arial, Helvetica, Sans-Serif;
line-height: 150%;}
.intro {font-style: italic;}
#firstPara {background-color: yellow;}
</style>
When the preceding is applied to a paragraph like
<p id="firstPara" class="intro">
Paragraph text goes here.
</p>
it produces a paragraph with a yellow background and black, Arial, italicized text that is
spaced with a 150 percent line height. What has happened is that the various rules are
applied by selectors, and some property values are inherited from their enclosing parent
elements. Using a small parse tree, Figure 4-3 shows just how the rules cascade downward
to the enclosed elements, which explains the motivation behind the name
Cascading
Style
Sheets.
In some cases, rules are even overridden by later-defined or more-precise rules that may
even be within inline styles.
Clearly, determining what rules apply to a particular tag can be a bit tricky, but as a rule of
thumb, the more specific the rule, the more recently defined the rule, and the closer to the tag
the rule is, the more powerful it is. For example, an inline style property would beat a value in
a document-wide style rule, while a document-wide style rule would beat a previously
defined linked style rule. Further, rules using an
id
would beat rules using a
class
, which
would beat rules based upon elements. Of course, all this can be overridden using an
!important
indicator at the end of a particular declaration, so here
<style type="text/css">
#hulk {color: green !important; font-size: xx-large !important;}
</style>
the element with an
id
value of '
hulk
' should be big and green. Though that too can be
overridden with subsequent rules setting these properties with
!important
. Given the
potential confusion of what rules are being applied at what times, CSS developers should
utilize a tool that can show the rendered style of an element upon inspection, as shown in
Figure 4-4.
There is plenty more to come with understanding the cascade, inheritance, and all the
various selectors. For now, with our brief introduction out of the way, it is time to see our
first style sheet in action.
