HTML and CSS Reference
In-Depth Information
The combination of multiple rules, with elements inheriting some properties and
overriding others, is the idea of the
cascade
that CSS is named for. The general idea of the
cascade, in effect, is that it provides a system to sort out which rules apply to a document
that has many style sheets. For example, a rule for a specific
<p>
tag marked with an
id
attribute is more powerful than a
class
rule applied to
<p>
, which in turn is more powerful
than a rule for the
p
element itself. Inline styles set with a
style
attribute are more important
than a document-wide style or linked style. An easy way to think about which rule wins is to
follow these helpful rules of thumb:
• The more specific the rule the more powerful.
• The closer the rule is to the tag the more powerful.
So with these rules, we see that
id
rules are more specific than
class
rules and thus
will override them. Inline styles are closer to tags than document-wide or external style
rules and thus take precedence, and so on.
T
IP
There is an actual process to determine the specificity of a particular rule versus another by
assigning numeric values to each rule, but if a designer requires such a careful analysis of the
style rules to determine an end result, the style sheet is simply too complex.
!important Override
If a particular rule should
never
be overridden by another rule, the
!important
indication
should be used. For a rule never to be ignored, insert the indication
!important
just before
the semicolon of the rule. For example, to always set all paragraphs to red text, you might
use the following:
p {color: red !important; font-size: 12px;}
Later on, you might have a paragraph with an inline style such as this:
<p style="color: green; font-size: 24px;">
This is a test
</p>
In this paragraph, the text would still be red due to the inclusion of the
!important
indicator, although it would be larger because that rule was overridden as expected. When
using the
!important
indicator, always make sure to put it at the end of a rule; otherwise,
it will be ignored. Using the
!important
override is not encouraged but it is an easy way to
force a style and can be useful if finding the originating source of a value is difficult.
Now that we have discussed the general sense of rules being applied to a document
tree, let's discuss the selectors that bind particular CSS rules to sections of a document.
Selectors
To understand CSS rules, you must first master selectors. We have briefly introduced basic
selectors such as element values and will review those first, but don't move on too quickly,
because there are many more selectors to discuss.
