HTML and CSS Reference
In-Depth Information
With that basic outline, you can probably already see how
!important
declarations weigh in, and what role they play in the cascade. Let's look at
!
important
in more detail.
Syntax and Description
An
!important
declaration provides a way for a stylesheet author to give
a CSS value more weight than it naturally has. It should be noted here that
the phrase “!important declaration” is a reference to an entire CSS
declaration, including property and value, with
!important
added (thanks
to
Brad Czerniak
for pointing out this discrepancy). Here is a simple code
example that clearly illustrates how
!important
a
"
ects the natural way
that styles are applied:
#example {
font-size: 14px !important;
}
#container #example {
font-size: 10px;
}
In the above code sample, the element with the id of “example” will have
text sized at 14px, due to the addition of
!important
.
Without the use of
!important
, there are two reasons why the second
declaration block should naturally have more weight than the first: The
second block is later in the stylesheet (i.e. it's listed second). Also, the
second block has more specificity (
#container
followed by
#example
instead of just
#example
). But with the inclusion of
!important
, the first
font-size
rule now has more weight.
