MACROMEDIA DREAMWEAVER MX 2004-USING DREAMWEAVER Use Manual page 276

About conflicting CSS styles
When you apply two or more CSS styles to the same text, the styles may conflict and produce
unexpected results. Browsers apply style attributes according to the following rules:
•
If two styles are applied to the same text, the browser displays all attributes of both styles unless
specific attributes conflict. For example, one style may specify blue as the text color and the
other style may specify red as the text color.
•
If attributes from two styles applied to the same text conflict, the browser displays the attribute
of the innermost style (the style closest to the text itself ). Thus, if a text element has both an
external style sheet and an inline CSS style affecting it, the inline style is the one that is applied.
•
If there is a direct conflict, the attributes from CSS styles (styles applied with the
attribute) overrule attributes from HTML tag styles.
In the example that follows, the style defined for
paragraphs, but the custom CSS style
h1
setting in the
H1
style.
.Blue
<h1><span class="Blue">This paragraph is controlled by the .Blue custom style
and h1
HTML tag style.<span class="Red">Except this sentence is controlled by the .Red
style.</span>
Now we're back to the .Blue style.</span></h1>
Shorthand CSS properties
The CSS specification allows for the creation of styles using an abbreviated syntax known as
shorthand CSS. Shorthand CSS lets you specify the values of several properties using a single
property tag. For example, the
,
weight font-size
A key issue to note when using shorthand CSS, is that values omitted from a shorthand CSS
property are assigned their default value. This may cause pages to be incorrectly displayed when
two or more CSS styles are assigned to the same tag.
For example, the
,
font-stretch
default values.
H1 {
font-weight: bold;
font-size: 16pt;
line-height: 18pt;
font-family: Arial;
font-variant: normal;
font-style: normal;
font-stretch: normal;
font-size-adjust: none
}
Rewritten as a single, shorthand property, the same tag appears as follows:
H1 { font: bold 16pt/18pt Arial }
When written using shorthand notation, omitted values are automatically assigned their default
values. Thus, the shorthand example above omits the
, and
size-adjust
276 Chapter 13: Inserting and Formatting Text
style. The second custom CSS style
property lets you set
font
, , and
line-height
tag shown below uses longhand CSS syntax. Note that the
H1
, and
font-size-adjust
tags.
font-style
might specify the font, size, and color for all
h1
applied to this paragraph overrules the color
.Blue
overrules
.Red
font-style
properties within a single line of syntax.
font-family
properties have been assigned their
font-style
font-variant
class
because it is inside the
.Blue
, ,
font-variant font-
font-variant
, ,
font-stretch font-
,