HTML and CSS Reference
In-Depth Information
Assuming that a property does inherit, it is still possible to override the inheritance of
a property. For example, given the following two rules:
p {color: red; font-size: xx-large;}
strong {color: yellow;}
the color of the text within the
<strong>
tag would be yellow and have an
xx-large
size.
Both of the properties were inherited, but the
color
property was overridden by the
color
rule for the
<strong>
tag, which is more specific:
p {color:red; font-size: xx-large}
strong {color: yellow;}
body
p
Red, xx-large
Override Inherit
strong
Yellow, xx-large
In any case, it is possible to override the rendering of style by setting the
!important
directive at the end of the rule declaration, as follows.
div {font-size: 14pt; line-height: 150%; font-family: Arial ! important;}
A style specified as
!important
should override any other applied style and thus
should be used sparingly.
While the
!important
indicator makes things clear, the potentially confusing
combination of applying 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. 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 to the tag the rule, the more powerful.
The specific nature of the rule generally is determined by the selector used, and the
inclusion of the style rule defines the closeness to the markup; both are discussed next.
Style Inclusion Methods
This section reviews the basic methods to associate CSS-based style information with
(X)HTML documents.
Linked Styles
Styles can be contained in an external style sheet linked to a document or a set of
documents, as shown in the following example. Linked information should be placed inside
the
<head>
tag.
<link rel="stylesheet" type="text/css" href="/styles/newstyle.css">
