Operation Manual

To the top
To the top
inherit certain properties from body tags, span tags inherit certain properties from paragraph tags, and so on. Thus, if you create the following rule
in your style sheet:
body {
font-family: Arial;
font-style: italic;
}
All paragraph text on your web page (as well as text that inherits properties from the paragraph tag) will be Arial and italic because the paragraph
tag inherits these properties from the body tag. You can, however, become more specific with your rules, and create styles that override the
standard formula for inheritence. For example, if you create the following rules in your style sheet:
body {
font-family: Arial;
font-style: italic;
}
p {
font-family: Courier;
font-style: normal;
}
All body text will be Arial and italic except paragraph (and its inherited) text, which will display as Courier normal (non-italic). Technically, the
paragraph tag first inherits the properties that are set for the body tag, but then ignores those properties because it has properties of its own
defined. In other words, while page elements generally inherit properties from above, the direct application of a property to a tag always causes an
override of the standard formula for inheritance.
The combination of all of the factors discussed above, plus other factors like CSS specificity (a system that gives different weight to particular
kinds of CSS rules), and the order of CSS rules, ultimately create a complex cascade where items with higher priorities override properties that
have lower priorities. For more information on the rules governing the cascade, inheritance, and specificity, visit
www.w3.org/TR/CSS2/cascade.html.
About text formatting and CSS
By default, Dreamweaver uses Cascading Style Sheets (CSS) to format text. The styles that you apply to text using the Property inspector or
menu commands create CSS rules that are embedded in the head of the current document.
You can also use the CSS Styles panel to create and edit CSS rules and properties. The CSS Styles panel is a much more robust editor than the
Property inspector, and displays all CSS rules defined for the current document, whether those rules are embedded in the head of the document
or in an external style sheet. Adobe recommends that you use the CSS Styles panel (rather than the Property inspector) as the primary tool for
creating and editing your CSS. As a result, your code will be cleaner and easier to maintain.
In addition to styles and style sheets you create, you can use style sheets that come with Dreamweaver to apply styles to your documents.
For a tutorial about formatting text with CSS, see www.adobe.com/go/vid0153.
About 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 declaration. For example, the font property lets you set font-style, font-variant, font-
weight, font-size, line-height, and font-family properties on a single line.
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 rules are assigned to the same tag.
For example, the h1 rule shown below uses longhand CSS syntax. Note that the font-variant, font-stretch, font-size-adjust, and
font-style properties have been assigned their 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
}
115